块级元素的底边距

块级元素的底边距

我们通常使用一个块级元素作为控制版式的外围元素,例如

<div>

这里是内容。。。

</div>

这样的结构,为了和其他的块级元素产生层次感,我们通常会为该块级元素指定一个上下边距。但是同时我们还可能在块级元素的内部使用<p>一类的标签,而不同的段落之间也是要有上下边距的,这就会产生一个问题,那就是最后一个段落结束后会出现两个底边距——一个段落产生的底边距,一个块级元素产生的底边距。看下面的效果图。

 

如上图所示,我们明显看到上面的段落结束后的底边距过大的问题。那么如何解决呢,有一个非常快速的方法就是设置一个伪对象:

div p:last-child{margin-bottom:0}

但是这个属性在IE8及以下版本的浏览器中并不支持。那怎样才能解决这个问题呢,在IE7/8的解决方案中给出了如下代码:

blockquote, p { margin-top: 20px; }
blockquote p:first-child { margin-top: 0; }

这样可以实现相同的效果,因为在IE7/8中是支持p:first-child属性的,而不支持p:last-child属性。

但是不要忘了,在国内由于IE6在人们心中的根深蒂固,所以还是不得不考虑IE6的兼容的,因此上面的文章所讲的技术也许只有在将来IE6被完全淘汰的时候才用得上。

青岛网站建设在此只是作为一个技术性的探讨与大家分享。