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


目录
相关文章
|
11月前
|
前端开发 容器
前端祖传三件套CSS的盒模型之padding
前端开发中,CSS是不可或缺的一部分。对于初学者来说,CSS的盒模型是一个必须掌握的概念。其中,padding作为盒模型的一部分,控制了盒子内部内容与边框之间的距离。本文将讲解padding的用法,并提供实例进行演示。
98 0
|
前端开发 容器
CSS中 块级元素、行内元素、行内块元素区别
CSS中 块级元素、行内元素、行内块元素区别
168 0
html+css实战111-行内元素的垂直外边距
html+css实战111-行内元素的垂直外边距
129 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
80 0
html+css实战100-border和padding
html+css实战100-border和padding
80 0
html+css实战102-新浪导航padding优化
html+css实战102-新浪导航padding优化
115 0
html+css实战102-新浪导航padding优化
|
前端开发
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
html+css实战94-内容width和height
html+css实战94-内容width和height
73 0
html+css实战94-内容width和height
|
前端开发 Java 容器
CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
1590 0