不设置图片高度的话，图片和下面的文字会有空隙，是什么原因呢？
来源：3-4 编程练习
蔡志
2020-07-07 16:21:01
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main1{
width: 800px;
overflow:hidden;
}
.img1,.img2,.img3,.img4,.img5,.img6{
margin: 10px;
float:left;
border:1px solid gray;
}
.text1,.text2,.text3,.text4,.text5,.text6{
font-family: "微软雅黑";
font-size: 14px;
}
.i1,.i2,.i3,.i4,.i5,.i6{
height: 135px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main1">
<div class="img1">
<div class="i1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<p class="text1"> 欢迎来到慕课网学习新知识</p>
</div>
<div class="img2">
<div class="i2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<p class="text2"> 欢迎来到慕课网学习新知识</p>
</div>
<div class="img3">
<div class="i3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<p class="text3"> 欢迎来到慕课网学习新知识</div>
</div>
<div class="img4">
<div class="i4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<p class="text4"> 欢迎来到慕课网学习新知识</p>
</div>
<div class="img5">
<div class="i5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<p class="text5"> 欢迎来到慕课网学习新知识</p>
</div>
<div class="img6">
<div class="i6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<p class="text6"> 欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，代码中有如下问题：
1. 6组图片外侧缺少边框，正确的效果图如下：
建议将6组图文都放在一个父元素中，如下：
2. 父元素与图片之间的距离（1、2）和图片与图片之间的距离（3）不相等，并且间距1和间距2也不相等：
建议调整父元素的样式，如下：
问题解答如下：
由于图片是内联元素，它底部有默认的间隙，所以图片和文字之间会有间隙。可以通过同学这种，给图片所在父元素设置高度的方式来解决这个间隙问题，还可以通过设置img为块级元素来消除间隙，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题