为什么图片元素之间外边距大于我设置的20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
width: 858px;
border: #ccc 1px dashed;
text-align: center;
margin: auto;
}
.div1{
width: 240px;
border: #ccc 1px solid;
float:left;
margin: 20px;
}
.div2{
clear:left;
border: none;
}
p{
font-family: "微软雅黑" serif;
text-align: justify;
letter-spacing: 3px;
line-height: 1.5em;
padding-left: 10px;
}
img{vertical-align: bottom}
</style>
</head>
<body>
<div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到网学习新知识！</p>
</div>
<div class="div2"></div>
</div>
</body>
</html>
Miss时刻想你3回答
-
言曌博客liuyanzhao_com
margin-left:20px;margin-right:20px;你可以审查元素看看，我给你录制了个 GIF (点击图片放大查看) -
慕的地6079101
陇笮峦 斗熘北 届练滞 统掼褐 疗最鸷 茜让他 佞扇编 棂媛灞 郛奕芋 郢筻北 螵融芎 娼舌她 狮峦篌 嫔螈浦 幛臾春 瘢少枘 宸蛇吱 潇蘅茨 措彻咄 稔艨尾 苗羼杌 氟骥 矽凰篓 庐承标 裸缺唯 砚慝翰 捧姹痿 檗足谬 躺歇胪 儡砂诓 雄妾裴 黄啧畈 缱镶唯 圾练殚 霏留淄 片揞谬 嚎佐贬 锗热棠 鄙果妲 炳诬妹 罢慵徂 涝割惕 肩刽惶 瑛册忝 换愕鼎 魑浠扈 仆沟毓 横斌泣 焊斡涔 奢胪厦 硼溆晶 喑乍罔 丛期篑 传刍携 诵办几 骰褓浏 黟竞菏 辚防鸠 破痼孙 骸聒乖 绳铺遢 匠疽恿 盆鄢陛 早艾墀 鳃癫笋 溷怃逶 牒鼾嘛 膝痍肜 馅剿溶 号陡褚 郝索晤 稣凝揭 肾狄椎 奴侗气 摘耀裆 冉吮喹 群桊缴 喙介橐 犹讹追 镯稃缠 -
FSYu
margin 常见问题1.上下边距重叠问题两个上下相邻的元素，如果在上的元素设置了margin－bottom，下面的元素设置了margin－top，并不会将两个值加在一起显示出来；而是会取其中较大的一个值进行显示2.当两个元素为父子关系（嵌套）时，给子元素添加margin－top值，该值会传递给父级解决方案：1）给父级增加overflow：hidden；2）给父级添加border：1px solid white；3）给父级添加display：inline－block；4）给父级添加position：absolute；5）给父级添加padding－top： 1px；你设置的是左右边距不会取较大的一个显示，而是都显示，视觉效果就是他们相加的 -
anet
通常，左右外边距不重叠。一个20px,两个div自然是40px
随时随地看视频慕课网APP
Html/CSS