web前端学习分享-行内元素的盒模型
HTML中的每一个元素都可以用盒模型来描述。对于块级元素来说，可以通过设置width/height，padding、border，margin来改变元素的大小，位置等。行内元素和块级元素一样，也有盒模型，但是设置以上属性却并不都是有效的，因为一直对行内元素的盒模型认识不透彻，所以本文会对行内元素的这几个盒模型相关的属性一一验证是否有效，以加深理解。
验证：对行内元素设置width/height是否有效？
<span class="s1">我是span</span>
<div class="box1"></div>分别对行内元素span.s1和块元素div.box1都设置width和height属性
.s1{background-color: yellow;width: 100px;height: 100px;}
.box1{width: 100px;height: 100px;background-color: #bfa;}
可以看到，行内元素不支持设置width和height，设置了也无效！行内元素的width和height是由元素本身的内容大小决定的。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
以下为了直观的观察设置margin，padding，border是否对行内元素有效，此处先设置一个参照物
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是参照组</title>
<style>
#box1{border: 2px solid black;padding: 10px;}
span{border: 1px solid black;}
.span2{background-color: pink;}
.span3{background-color: #bfa;}
.span4{background-color: orange;}
.span5{background-color: skyblue;}
</style>
</head>
<body>
<div id="box1">
<span class="span1">我是行内元素span1</span><hr>
我是span2左侧的文本<span class="span2">我是行内元素span2</span><hr>
<span class="span3">我是行内元素span3</span>我是span3右侧的文本<hr>
<span class="span4">我是行内元素span4</span><hr>
<span class="span5">我是行内元素span5</span><hr>
</div>
</body>
</html>验证：对行内元素设置margin是否有效？
分别对span设置margin-left，margin-right，margin-top，margin-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置margin组</title>
<style>
#box1{border: 2px solid black;padding: 10px;}
span{border: 1px solid black;}
.span2{background-color: pink;margin-left: 20px;}
.span3{background-color: #bfa;margin-right: 20px;}
.span4{background-color: orange;margin-top: 20px;}
.span5{background-color: skyblue;margin-bottom: 20px;}
</style>
</head>
<body>
<div id="box1">
<span class="span1">我是行内元素span1</span><hr>
我是span2左侧的文本<span class="span2">我是设置了margin-left: 20px;行内元素span2</span><hr>
<span class="span3">我是设置了margin-right: 20px;行内元素span3</span>我是span3右侧的文本<hr>
<span class="span4">我是设置了margin-top: 20px;行内元素span4</span><hr>
<span class="span5">我是设置了margin-bottom: 20px;行内元素span5</span><hr>
</div>
</body>
</html>
可以很直观的看到，对行内元素设置的左右margin是有效的，上下margin无效！
验证：对行内元素设置padding是否有效？
分别对span设置padding-left，padding-right，padding-top，padding-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置padding组</title>
<style>
#box1{border: 2px solid black;padding: 10px;}
span{border: 1px solid black;}
.span2{background-color: pink;padding-left: 20px;}
.span3{background-color: #bfa;padding-right: 20px;}
.span4{background-color: orange;padding-top: 20px;}
.span5{background-color: skyblue;padding-bottom: 20px;}
</style>
</head>
<body>
<div id="box1">
<span class="span1">我是行内元素span1</span><hr>
我是span2左侧的文本<span class="span2">我是设置了padding-left: 20px;行内元素span2</span><hr>
<span class="span3">我是设置了padding-right: 20px;行内元素span3</span>我是span3右侧的文本<hr>
<span class="span4">我是设置了padding-top: 20px;行内元素span4</span><hr>
<span class="span5">我是设置了padding-bottom: 20px;行内元素span5</span><hr>
</div>
</body>
</html>
可以看到，对行内元素设置padding-left和padding-right是有效的，会撑大盒子，对左右方向的元素布局是有影响的。对行内元素设置padding-top和padding-bottom看起来好像是有效的，竖直方向的内边距从视觉上使该元素的内容范围变大了，并会盖住周围的元素，但仔细观察，发现这只是表象，上下元素的布局并没有受到任何影响，所以实际上对行内元素设置上下padding也是无效的！
验证：对行内元素设置border是否有效？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置border组</title>
<style>
#box1{border: 2px solid black;padding: 10px;}
span{border: 1px solid black;}
.span2{background-color: pink;border-left: 20px solid yellow;}
.span3{background-color: #bfa;border-right: 20px solid yellow;}
.span4{background-color: orange;border-top: 20px solid yellow;}
.span5{background-color: skyblue;border-bottom: 20px solid yellow;}
</style>
</head>
<body>
<div id="box1">
<span class="span1">我是行内元素span1</span><hr>
我是span2左侧的文本<span class="span2">我是设置了border-left: 20px;行内元素span2</span><hr>
<span class="span3">我是设置了border-right: 20px;行内元素span3</span>我是span3右侧的文本<hr>
<span class="span4">我是设置了border-top: 20px;行内元素span4</span><hr>
<span class="span5">我是设置了border-bottom: 20px;行内元素span5</span><hr>
</div>
</body>
</html>
行内元素的border和padding类似，也是左右border有效，上下border从表面上看是撑大了盒子，会遮挡周围元素，但是实际上并不会影响竖直方向元素的布局，所以对于行内元素来说，上下border也是无效的！
结论
上面的验证比较繁琐，但是可以对行内元素的盒模型有一个直观的认识，依据上面的验证结果，可以得出下面的结论：
-- 行内元素不支持设置width和height，默认由其内容大小决定。
-- 行内元素可以设置padding，但是只有左右padding是有效的，上下padding尽管从视觉上可以撑大盒子，但是并不会影响竖直方向其他元素的布局；
-- 行内元素可以设置margin，但是只有左右margin是有效的，上下margin无效！
-- 行内元素可以设置border，但是只有左右border有效，上下border在视觉上也可以撑大盒子，但是并不会影响竖直方向其他元素的布局；
参考：https://blog.csdn.net/qq_37621289/article/details/82859024
- 点赞
- 收藏
- 关注作者
评论（0）