HTML常见问题解决去除图片下的横线 margin的传递问题 高度塌陷

一.去除图片下的横线.

1.图片的下面默认对齐为基线,所以可以通过改变图片垂直相对于文本的顶线对齐即

vertical-align:top;

2.将img插入图片的行内块属性改为块标签

只需在css中对img进行以下修饰:

display:block;

二.margin的传递问题

margin-top的传递问题:子元素的margin-top会把父元素一起带下来
解决方法:
1.给父元素overflow:hidden;
2.给父元素或子元素加浮动float
3.给父元素加透明边界border:1px solid transparent;

三.子元素浮动时父元素的高度塌陷问题

当父元素没有设置高度内部的子元素浮动时,父元素的高度会产生塌陷.
解决方法:
1.给父元素overflow:hidden;
2.给父元素高度
3.万能清除浮动法 很重要

可以放在公共css里,

.父元素:after{content:"";clear:both;display:block; visibility:hidden;}