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 是无效的。


目录
相关文章
|
4月前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
47 0
|
5月前
|
前端开发
css实用技巧——利用内联元素的padding实现高度可控的分隔线
css实用技巧——利用内联元素的padding实现高度可控的分隔线
35 2
|
5月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
49 1
|
5月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
165 1
|
5月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
56 0
|
6月前
|
前端开发 容器
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
287 0
|
7月前
|
前端开发
CSS padding(填充)
CSS padding(填充)。
64 1
|
7月前
|
前端开发
CSS margin
CSS margin。
44 1
|
7月前
|
前端开发
CSS margin
CSS margin。
41 1
|
前端开发
深入理解CSS中的line-height的使用
深入理解CSS中的line-height的使用

热门文章

最新文章