img如何去掉空白节点和如何解决父级元素高度塌陷问题

最新推荐文章于 2022-02-11 15:24:23 发布

qq_43102118

最新推荐文章于 2022-02-11 15:24:23 发布

阅读量384

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_43102118/article/details/106143555

版权

如何去掉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>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_43102118

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
img如何去掉空白节点和如何解决父级元素高度塌陷问题

如何去掉img中的空白节点和如何解决父级元素高度塌陷问题去掉img空白节点写个小案例，在body里面添加个div标签，在div标签里面添加3张图片,在head标签里面添加样式。代码如下：<head> <style> #content{ width:1000px; background-color:#aaa; } img{ width:300px; height:300px; } </style&gt
复制链接

扫一扫