在设置元素宽度时为什么算好的却不能平铺

时代问答问答社区

京东商品展示 *{ margin: 0; padding: 0; } .main{ width: 360px; height: 360px; margin: auto auto; border: none; } .main .buttom{ border: none; } .main .buttom ul{ list-style: none; } .main .buttom li{ width: 90px; height: 70px; display: inline-block; } .main .buttom img{ margin-left: 10px; }

为什么上下之间有空隙。然后父元素是360px；我设置li的宽度为90px为什么不能在同一行显示图片

显示全部楼层

免责声明：本内容仅代表回答者见解不代表本站观点，请谨慎对待。

使用道具举报

上一主题下一主题

参与会员1

m8497***

大的盒子的width:360;但是.main .buttom img {margin-left：10px;} 外边距是10个像素，所以li的宽度大于360px;所以掉下来了
实际盒子的宽度：90*4+4*10=400
解决的方法，1、可以减少 li的宽度 80*4+4*10=360
2、不添加 img的外边距 90*4 = 360
楼主可以好好理解一下盒子模型，对内外边距理解的清楚一点，就很好掌握了

使用道具举报