如果宽度是786px,那就是说两侧的距离分别是20px【padding+ margin】?

如果宽度是786px,那就是说两侧的距离分别是20px【padding+ margin】?

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <meta charset="utf-8">
        <title>3-4编程练习</title>
        <style type="text/css">
            *{margin:0;
              padding:0;
              }
            .container{border:1px #acacac dashed;
                margin:0 auto;
                padding:10px;
                width:786px;
                overflow:hidden;
                zoom:1;
                }
             .container div{float:left;
               margin:10px;
               border:1px solid #acacac;
               }
               img{display:block;}
        </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="container">
               <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
            <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
            <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
                <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
            <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
            <div>
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
                <p>欢迎来到慕课网学习新知识</p>
            </div>
        </div>
</body>
</html>

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,浮动之后的元素的外边距是不重叠的哦。

如下,黄色阴影部分是第一个元素的外边距,但是与第二个元素之间还有点间距,这个就是第二个元素的外边距哦。

http://img1.sycdn.imooc.com//climg/5d67b3bd0001743603480233.jpg

所以是需要两个都加上的。

希望能帮助到你,祝学习愉快!

好帮手慕糖 2019-08-29 14:35:06

同学你好,关于大盒子的计算,可以参考如下哦;

1、一个小盒子占据的宽度是262px(包括左右的边框与左右的外边距),例:

http://img1.sycdn.imooc.com//climg/5d67716a0001eba017700383.jpg

2、一行三个小盒子,所以262 *3 = 786px;所以大盒子的宽度设置786px就可以了。

3、如下,786是圈起来的部分,由于大盒子设置了10px的内边距,下面一圈浅绿色的就是这个10px的内边距。

http://img1.sycdn.imooc.com//climg/5d67719e00015bed08230383.jpg

但是这个内边距,是不需要设置在宽度中的,所以大盒子的宽度设置为三个小盒子占据的宽度之后即可。

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 Yabel #1
    那也就是说,两张图片之间的实际宽度是10px(外边距重叠取两者之间较大的值),但是算大盒子的宽度要将两个外边距相加也就是按照20px计算?
    2019-08-29 16:11:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师