margin

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

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

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

以下是W3C关于margin 的声明：

说明

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

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

注释：允许使用负值。

 

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

 

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

行内元素和width

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

以下例子中，对行内元素<a>应用了width: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