块之间的距离用margin设置，结果没有重叠，成了双倍，糊涂了
来源：3-4 编程练习
午炎子栩
2019-07-14 11:27:53
<html>
<head>
<!-- 此处编写样式 -->
<title>浮动</title>
<style type="text/css">
*{margin:0px auto;padding=0px;}
.container{
width:666px;background:green;
padding:10px;
border:10px black solid;
/*padding:30;*/
overflow:hidden;
/*zoom:1; */
}
.content{
width:200px;
margin:10px 10px;
border:1px black solid;
float:left
;
}
img{
width:202px;
float:left;
/*height:150px;*/
}
.text{padding-bottom:1px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg水电费感到</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg水电费感到</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg费感到</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg水电费感到</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg水电费感到</div>
</div>
<div class="content">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">asdfasdg水电费感到</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，1、是因为设置了浮动哦，浮动之后，margin就不在重叠了。
2、父级的宽度设置的为200px，但是图片设置202px，导致超出，建议：图片的宽度可以设置为200px，例：
3、如下，属性与属性值之间应该使用冒号，不是等号。
希望能帮助到你，欢迎采纳。
祝学习愉快！
0
相似问题