CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?

简介: CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?

1、首先行内元素是否具有盒子模型?

答:行内元素同样具有盒子模型


2、行内元素的 padding、margin、width、height、line-height 是否无效?

答:


行内元素的 padding-top、padding-bottom、margin-top、margin-bottom 属性设置是无效的。

行内元素的 padding-left、padding-right、margin-left、margin-right 属性设置是有效的。

行内元素的 padding-top、padding-bottom 从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。

行内元素的 line-height 属性设置是有效的。

行内元素的 width、height 属性设置是无效的。


/////

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            background-color: red;
            margin:10px;
            padding: 30px;
            /* line-height: 100px; */
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <div>我是div1我是div1我是div1我是div1我是div1</div>
    <span>我是span</span>
    <div>我是div2我是div2我是div2我是div2我是div2</div>
</body>

image.png


观察上面两张图:


span 标签左右外边距10px,说明行内元素的 margin-left、margin-right 设置是有效的。

span 标签上下外边距10px,说明行内元素的 margin-top、margin-bottom 设置是无效的。

span 标签左右内边距30px,说明行内元素的 padding-left、padding-right 设置是有效的。

span 标签上边距为 <div>我是div1...</div>的自动扩展高度,下边距为30px,说明行内元素的 padding-top 设置是无效的。

div 标签中的文字“我是div”和 span 标签中的文字“我是span”两行相连接,并没有任何间距,说明行内元素的padding-top、padding-bottom 并没有被撑开,只是从显示效果上看貌似被撑开了。

如果取消注释的话(图右),span 标签上下 line-height 100px 有效的。

span 标签 width、height 500px 是无效的。


目录
相关文章
|
1月前
|
前端开发
CSS padding(填充)
CSS padding(填充)。
21 1
|
1月前
|
前端开发
CSS margin
CSS margin。
21 1
|
1月前
|
前端开发
CSS margin
CSS margin。
21 1
|
6月前
|
前端开发
深入理解CSS中的line-height的使用
深入理解CSS中的line-height的使用
|
7月前
|
前端开发
|
8月前
|
前端开发 容器
|
8月前
|
前端开发 容器
Web前端 — CSS之盒模型 以及margin负值、塌陷重叠问题
Web前端 — CSS之盒模型 以及margin负值、塌陷重叠问题
35 0
|
8月前
|
前端开发 开发者 容器
关于 SAP UI5 预定义的 CSS Margin class
关于 SAP UI5 预定义的 CSS Margin class
|
前端开发
前端祖传三件套CSS的盒模型之margin
当我们在写前端代码时,CSS的盒模型是一个必须要掌握的概念。之前我们已经谈到了盒模型中的border和padding属性,那么今天我们将会继续深入盒模型的另一个主要属性:margin。
106 0
|
前端开发 容器
前端祖传三件套CSS的盒模型之padding
前端开发中,CSS是不可或缺的一部分。对于初学者来说,CSS的盒模型是一个必须掌握的概念。其中,padding作为盒模型的一部分,控制了盒子内部内容与边框之间的距离。本文将讲解padding的用法,并提供实例进行演示。
103 0