css内外边距

2021-07-01 17:33:42 阅读：242 来源： 互联网

标签：border padding 10px 外边 20px margin div css

外边距和内边距

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容，显示文本和图像。

元素的宽度和高度:

Remark 重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

'''
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左
'''

下面的例子中的元素的总宽度为300px：

'''
width:250px;
padding:10px;
border:5px solid gray;
margin:10px; 
'''

思考1:

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解决方法：

body{
    margin: 0;
}

思考2：

margin collapse（边界塌陷或者说边界重叠）

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2父子div

如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta class="keywords" content="css的内外边距">
    <meta class="description" content="study">
    <meta http-equiv="Refresh" content="1800;https://www.baidu.com">
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
    <title>标题</title>
    <link rel="stylesheet" href="day111.css">
    <link rel="icon" href="https://www.baidu.com/favicon.ico">
    <!--<script src="js.js"></script>-->
</head>

<body>
    <div class="div1">hello div1</div>

    <div class="div2">hello div2</div>

    <div class="div3">hello div3</div>

    <div class="div4">
        <!--content-->
        <div class="div5">111111</div>
        <div class="div6">222222</div>
    </div>
</body>
</html>

.div1{
    width: 200px;
    height: 200px;
    background-color: lightpink;
    border: 20px solid red;
    /*边框粗细20px*/
    padding: 20px;
    /*padding是上下左右内边距都为20px，内边距是从文本开始算起*/
    margin-bottom: 20px;
    /*下外边距20px*/

    /*margin: 20px;*/
    /*简写上/右/下/左外边距20px*/
    /*margin: 10px 20px 30px 40px;*/
    /*分别代表上/右/下/左外边距*/
    /*margin: 10px 20px 30px;*/
    /*分别代表上/右左/下外边距*/
    /*margin: 10px 20px;*/
    /*分别代表上下/左右外边距*/
}

.div2{
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
    border: 20px solid green;
    padding: 10px;
    margin-left: 20px;
    /*左外边距20px*/
    margin-top: 30px;
    /*上外边距30px，div2和div1是兄弟div，那么上下外边距会有边界塌陷，取上下两者最大值作为显示，即div1和div2上下间距为30px，并不是50px*/
}

body{
    border: 2px solid black;
    margin: 0px;
    /*body标签与浏览器有默认外边距，可自行取消*/
}


.div3{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

.div4{
    width: 500px;
    height: 500px;
    background-color: mediumspringgreen;
    /*border: 1px solid red;/*/
    /*不能为0px*/
    /*padding: 1px;*/
    /*不能为0px*/
}

.div5{
    width: 100px;
    height: 100px;
    background-color: orangered;
    margin-top: 30px;
    /*div4标签没有border/padding/inline content(文本内容)，那么div5的margin会往上找，要么碰到div3(和div4是兄弟div)进行margin，要么碰到div4的父级及往上的父级(body是div4父级)有border/padding/inline content再进行margin*/
}

.div6{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

标签：border,padding,10px,外边,20px,margin,div,css
来源： https://www.cnblogs.com/xuewei95/p/14959855.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css内外边距

外边距和内边距