本文介绍了如何使用CSS处理img标签中的空白节点，通过添加`display: block`属性来避免，并讨论了父级元素高度塌陷的原因及解决方案，包括使用浮动布局后背景图片丢失的问题，提出了在父元素末尾添加带有`clear: both`的空div来修复高度塌陷的策略。
如何去掉img中的空白节点和如何解决父级元素高度塌陷问题
去掉img空白节点
写个小案例，在body里面添加个div标签，在div标签里面添加3张图片,在head标签里面添加样式。代码如下：
<head>
<style>
#content{
width:1000px;
background-color:#aaa;
}
img{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="content">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
</div>
</body>
效果图：
解决方法：
在img中添加display:block属性，转为块级元素独占一行就解决了，如果想要图片行排显示，可以给图片添加浮动属性
<style>
#content{
width:1000px;
height:400px;
background-color:#aaa;
}
img{
width:300px;
height:300p
最低0.47元/天 解锁文章
扫一扫
6424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
