margin

好了,特么每次登陆进来都在首页看到一堆大神发表各类高大上文章,忍不住去围观。还是来记录自己的菜鸟的东西吧。

今天在复习HTML5的实例,想去掉<header>标签与<nav>标签中间的一个<P>标签。可发现去掉后布局就乱了。

后来发现是margin的问题(好吧,是自己前端技术渣,以前总来深究过这个问题)

以下是W3C关于margin 的声明:

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

 

另外从网上看了下行内元素与块级元素对margin属性的支持:

 

1.尺寸-块级元素和行内元素之间的一个重要的不同点 

行内元素和width

W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。

以下例子中,对行内元素<a>应用了200px,你可以看到,根本就没有什么效果。

行内元素和块级元素有哪些

行内元素和height

W3C CSS2 标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。

以下例子,对行内元素<a>应用了height:50px,你可以看到什么效果都没。

行内元素和块级元素有哪些

行内元素和padding

你可以给行内元素设置padding,但只有padding-left和padding-right生效。

以下例子,行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响,但是对上下没影响。

行内元素和块级元素有哪些

行内元素和marging

margin属性也是和padding属性一样,对行内元素左右有效,上下无效。

下面的例子,对<a>应用了margin:50px,你可以看到左右边缘是生效了但是内容上下却没有。

行内元素和块级元素有哪些

  记住对行内元素

设置宽度width   无效。
设置高度height  无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了

以上来自http://blog.sina.com.cn/s/blog_72c8c1150100q76q.html

 

 

原文地址:https://www.cnblogs.com/qyzy1024/p/4012890.html