设置的下外边距没效果
来源：3-4 编程练习
慕粉1469424710
2020-05-19 22:22:08
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{margin:0;padding:0;}
.container{width:900px;border:1px green dashed;overflow:hidden;zoom:1;margin:0 auto;}
dl{width:240px;border:1px #ececec solid;float:left;margin:10px;}
.div1,.div2,.div3,.div4,.div5,.div6{margin:20px;}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<dl>
<dt><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
<div class="div2">
<dl>
<dt><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
<div class="div3">
<dl>
<dt><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
<div class="div4">
<dl>
<dt><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
<div class="div5">
<dl>
<dt><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
<div class="div6">
<dl>
<dt><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></dt>
<dd>欢迎来到慕课网学习新知识！</dd>
</dl>
</div>
</div>
</body>
</html>
1回答
-
同学你好，因为dl设置浮动，脱离文档流，导致父元素高度塌陷，所以给div元素设置margin属性没有效果。
建议：去掉给div设置的margin属性，调整最外层盒子container的宽度为子元素占据宽度之和，然后通过给外层盒子设置padding属性，实现所有间距都一一样。示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题