HTML中⾏内元素的竖直⽅向的padding和margin是否真的⽆效
参考资料：
今天写⼀个导航栏时遇到了⼀个问题：⾏内元素的padding-top，padding-bottom和margin-top,margin-bottom是不是真的是⽆效的？
接下来就这个问题将具体分析：padding是外边距还是内边距
1.⾏内元素拥有盒⼦模型么
答案是是的。没错，⾏内元素跟块级元素⼀样，同样拥有盒⼦模型。
2.⾏内元素的padding-top，padding-bottom和margin-top,margin-bottom是否⽆效
答案同样是是的。盒⼦模型的width，height和padding-top，padding-bottom和margin-top,margin-bottom设置都是⽆效的。但是...
3.实战探讨⾏内元素的padding-top，padding-bottom和margin-top,margin-bottom
先来看两个实例：
example1：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example1</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
}
#main{
min-width:1280px;
background-color:pink;
margin:auto;
height:800px;
}
nav{
height:50px;
background-color: #ffffff;
}
nav ul li{
height:50px;
float:left;
background-color: #ffffff;
}
a{
line-height:50px;
padding:30px;
margin:30px;
background-color:green;
font-size:14px;
color:rgb(231,79,77);
}
</style>
</head>
<body>
<div id="main">
<header>
<nav>
<ul>
<li><a class="hnav" href="#">⾸页</a></li>
<li><a class="hnav" href="#">最新活动</a></li>
<li><a class="hnav" href="#">项⽬介绍</a></li>
<li><a class="hnav" href="#">爱⼼社区</a></li>
<li><a class="hnav" href="#">关于我们</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
效果（不会做点链接弹出demo的效果，会的⼤神求教）：
看效果图：链接元素a的⽗元素li以及nav元素的⾼度都是50px，且都为⽩⾊背景，但是设置a的css样式为padding:30px之后，发现⾼度超过了⽩⾊区域（即50px），按照⾏内元素的盒⼦模型理论，应该是padding-top和padding-bottom都是⽆效的，然⽽这⾥却有效了么？先来看另外⼀个例⼦：
example2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
span{
color:black;
padding:50px;
margin:50px;
border:3px solid black;
}
.
pone{
color:blue;
}
.ptwo{
color:tomato;
}
</style>
</head>
<body>
<p class="pone">
test 1<span>test span</span>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 te
st 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 </p>
<p class="ptwo">test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</p>
</body>
</html>
效果：
⼜是个奇怪的现象，我在截取另⼀张图，其他都⼀样，只是test 1部分的数量⼤量增加：
是的效果如上图，我们可以看到span设置的margin确实符合⾏内元素的盒⼦模型，⽔平⽅向外边距有效，竖直⽅向外边距⽆效，但是对于padding似乎是⽔平和垂直⽅向都有
效，但我们仔细看上述example1和example2的两张图：example1中，我们设置的padding-top和padding-bottom是相等的，那么如果竖直⽅向的内边距真的有效，那么content
的字体就应该居中，事实上并不是；example2中，我们⽆视边框的存在，可以看到竖直⽅向的内边距看不到任何效果，只有⽔平⽅向外边距有效。因此，⾏内元素竖直⽅向内边
距确实是⽆效的
查w3c的官⽅⽂档并没有到这个奇葩现象解释（可能我英语⽐较烂，没到），后来在⼀篇⽼外的⽂章⾥到了答案：
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the
这段话基本解释了上述现象，当我们使⽤内边距时，只有左右⽅向有效；当我们设置四个⽅向的内边距时，对于该⾏内元素，确实显⽰出效果，但是竖直⽅向的内边距只有效
果，对其他元素⽆任何影响。
因此，⾏内元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是⽆效；不过要注意⼀点，对于竖直⽅向的内边距该⾏内元素的内容范围是增⼤了，不过只
是表象，对周围元素⽆任何影响。
转载请注明原⽂地址并标明转载：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。