为什么图片元素之间外边距大于我设置的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>

查看完整描述

3 回答

言曌博客liuyanzhao_com

TA贡献164条经验获得超117个赞

margin-left:20px;

margin-right:20px;

你可以审查元素看看，我给你录制了个 GIF (点击图片放大查看)

//img1.sycdn.imooc.com//59924925000171e400120019.jpg

1 反对回复 2017-08-15

慕的地6079101

TA贡献3593条经验获得超0个赞

陇笮峦斗熘北届练滞统掼褐疗最鸷茜让他佞扇编棂媛灞郛奕芋郢筻北螵融芎娼舌她狮峦篌嫔螈浦幛臾春瘢少枘宸蛇吱潇蘅茨措彻咄稔艨尾苗羼杌氟骥 矽凰篓庐承标裸缺唯砚慝翰捧姹痿檗足谬躺歇胪儡砂诓雄妾裴黄啧畈缱镶唯圾练殚霏留淄片揞谬嚎佐贬锗热棠鄙果妲炳诬妹罢慵徂涝割惕肩刽惶瑛册忝换愕鼎魑浠扈仆沟毓横斌泣焊斡涔奢胪厦硼溆晶喑乍罔丛期篑传刍携诵办几骰褓浏黟竞菏辚防鸠破痼孙骸聒乖绳铺遢匠疽恿盆鄢陛早艾墀鳃癫笋溷怃逶牒鼾嘛膝痍肜馅剿溶号陡褚郝索晤稣凝揭肾狄椎奴侗气摘耀裆冉吮喹群桊缴喙介橐犹讹追镯稃缠

反对回复 2021-10-16

FSYu

TA贡献152条经验获得超59个赞

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；

你设置的是左右边距不会取较大的一个显示，而是都显示，视觉效果就是他们相加的

反对回复 2017-08-15

anet

TA贡献79条经验获得超19个赞

通常，左右外边距不重叠。

一个20px,两个div自然是40px

反对回复 2017-08-15

Miss时刻想你
视屏不是说，如果都设置了外边距，外边距是会合并的吗。如果有一个元素外边距大，那就取大的那个值。

回复 2017-08-15
anet
那是垂直方向上的外边距才会合并。

回复 2017-08-15
anet
margin:20px 10px;这个上下左右都为20px的写法

回复 2017-08-15

为什么图片元素之间外边距大于我设置的20px

为什么图片元素之间外边距大于我设置的20px

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

为什么图片元素之间外边距大于我设置的20px

为什么图片元素之间外边距大于我设置的20px

3 回答

相关问题推荐

添加回答