【学习总结】关于magin padding对block、inline、inline-block 元素的影响

来源：互联网发布：linux udp服务器编辑：程序博客网时间：2024/05/19 17:57

一：没有父子关系时
1.单元素情况：
在block元素之间，如果block元素都设置了margin属性，margin值取margin值较大的；
1.1. 在block元素加padding默认时会增大block的面积，这是因为
box-sizing属性的影响。

<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>padding margin 对block、inline、inline-block元素影响</title><style>    div{        width:700px;        height:100px;        background-color:pink;        margin:20px;        padding:10px;        /*box-sizing:content-box;*/        box-sizing:border-box;    }</style>    </head><body>    <!--对block的影响-->    <div>hello world!</div>    <div>很高兴认识你！</div>

默认情况下，属性width\height即为盒子模型中content的宽高，所以当我们加入padding时，盒子会变大;当我们强制设置box-sizing属性为border-box时，此时属性width\height即为盒子模型中整个盒子的宽高（包括padding\border宽高）,这时加入padding属性，盒子不会变大。但是在这种情况下，我们盒子宽高没有定量设定，也会变大,另一种情况是当padding-top+padding-bottom>=height值时，设置border-box属性值，盒子也会变大，padding-left+padding-right>=width,同理！

1.2 在inline元素之间，magin值只会影响inline元素水平方向上的距离，不会影响垂直方向上距离；padding会增大inline的面积区域。

<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>padding margin 对block、inline、inline-block元素影响</title><style>span{    background-color:blue;    margin:20px;    padding:10px;}</style>    </head><body>    <!-- 对inline的影响 -->    <span>hello world!</span>    <span>见到你很高兴！</span>

可以理解为行内元素整体为盒子模型中的content，padding会加行内元素外层加一段距离，而margin会增加行内元素之间的距离。

1.3 在inline-block元素之间，magin值会改变水平和垂直距离。
1.3. 1 在inline-block元素加padding默认时会增大block的面积，这是也是因为box-sizing属性的影响。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>inline-block</title><style>    input{        width:200px;        height:100px;        background-color:#eee;        margin:10px;        padding:20px;        /*box-sizing:border-box;*/        box-sizing:content-box;    }</style></head><body>       <input type="text" class="text" value="你好">       <input type="text" class="text">       <button>save</button>       <!-- <a href="#">你好！</a> --></body></html>

2.单元素相邻情况：
2.1 block <-> inline
margin值取决于block的margin值设定。但是inline元素设定padding值会减小二者元素之间的距离。

2.2 inline<->inline-block
margin值为二者设定的margin值之和。当inline元素和inline-block元素同行，padding不破坏margin值。

2.3 block<->inline-block
margin值为二者设定的margin值之和。padding值的设定不破坏margin值的大小。

<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>div inline inline-block</title><style>    .first{        width:200px;        height:100px;        background-color:#eee;        margin:10px;    }    input{        width:200px;        heigh:100px;        background-color:blue;        margin:10px;    }    span{        background-color:pink;        margin:30px;     }</style></head><body>    <div class="first"></div>    <span>hello world!</span>    <input type="text"></html>

二：存在父子关系时：
1.div>span 相邻 input

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>magrin 嵌套</title><style>body{    margin:0px;}    .container{        width:480px;        height:200px;        background-color: #eee;        margin:10px;        /*padding:10px;*/        box-sizing:border-box;    }    span{        background-color: pink;        margin:30px;    }    .text2{        width:100px;        height:50px;        background-color: blue;        margin:10px;        padding:5px;        /*box-sizing:border-box;*/    }</style></head><body>    <div class="container">        <span>你好！</span>    </div>    <input type="text" value="世界和平！" class="text2"></body></html>

div与input 之间的magin值为二者之和。
span的magin值之影响水平方向上的距离。
div 与input 的padding值影响区域的面积与box-sizing属性有关。添加padding值不会影响元素之间margin值的大小。但是span的padding值会破环元素之间margin值。
span的margin padding相对于父元素content,默认情况下（没有加属性值border-box），当父元素增加padding，
span 设定margin值相对原来变大了。

2.div>input 相邻 span

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>magrin 嵌套</title><style>body{    margin:0px;}    .container{        width:400px;        height:200px;        background-color: #eee;        margin:10px;        padding:20px;    }    span{        background-color: pink;        margin:10px;    }    .text2{        width:100px;        height:50px;        background-color: blue;    }</style></head><body>    <div class="container">    <input type="text" value="世界和平！" class="text2">    </div>    <span>hello world!</span></body></html>

span margin值之影响span元素在水平方向的距离。paddin值会破化div与span元素之间的margin。

3 div包含input span元素

<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>各种嵌套</title><style>    div{        width:40%;        height:300px;        background-color: #ff0;        margin:10px;    }    input{        background-color: blue;        margin:10px;    }    span{        background-color:red;        margin:10px;        padding:10px;    }</style>    </head><body>    <div>        <input type="text" value="你好！">        <span>hello world!</span>    </div></body></html>

值得注意的是：当input 和span 元素在同行时，设定input元素的margin值，span元素也会产生一个margin值，和input元素锁死在同一行。

4.div>div（挺奇怪滴现象）

<!DOCTYPE html>  <meta charset="UTF-8">  <title>Document</title><html><head><style type="text/css">* {  margin:0;  padding:0;  border:0;}#outer {  width:300px;  height:300px;  background-color:red;  margin:20px;}#inner1 {  width:50px;  height:50px;  background-color:blue;  margin:40px;}</style></head><body><div id="outer">  <div id="inner1"> </div>  <div id="inner2"></div></div><p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p></body></html>

block包含block元素，子元素和父元素的margin值会合并，取决与父子中margin值较大的，都是相对对
父元素的相邻元素或根元素。

最后。总结一下：

默认情况下，block元素占一行，不会与任何元素同行。、

-再复杂的block inline inline-block 元素的布局都可以转化成相邻元素的布局影响。（block包含block元素除外）

-inline-block block 元素padding受box-sizing属性影响。

-只有一种情况padding的设定会破坏margin值。即是inline元素与block元素相邻。

-inline-block 与 inline 元素再同行是，设定inline-block 的margin 会同时锁死inline。（也就是说我们可以通过设定与inline元素同行的inline-block元素会增加与inline相邻元素之间的margin.）

1 0