我设置了margin为20px为什么相邻两边没有合并宽度?

我设置了margin为20px为什么相邻两边没有合并宽度?

我这样设置为什么margin相邻两边的宽度相加了?不是说宽度是可以合并么?

http://img1.sycdn.imooc.com/climg//5991b5b60001b5f206540805.jpg

http://img1.sycdn.imooc.com/climg//5991b5b700013fd610840543.jpg

<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        div,p{

            margin:0;

            padding:0;

        }

        .content{

            float:left;

            width:850px;

            border:1px solid gray;

        }

        .li{

            float:left;

            margin:20px;

            border:1px solid gray;

        }

    </style>

</head>

<body>   

        <!-- 此处写代码 -->

        <div class="content">

            

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                </div>

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                    </div>

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                </div>

            

            

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                </div>

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                    </div>

                <div class="li">

                    <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

                    <p>欢迎来到慕课网学习新知识!</p>

                </div>

                

        </div>

</body>

</html>


正在回答

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

2回答

设置了float属性以后 垂直和水平方向的边距都不会合并,即相加

WCHENG 2017-08-15 09:01:41

在垂直方向,相邻的两个元素都设置外边距,外边距会发生合并;水平方向不会。

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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