行内属性什么意思?


本文摘自PHP中文网,作者藏色散人,侵删。

行内属性指的是行内style属性,而style属性就是规定元素的行内样式,并且因为行内元素同样具有盒子模型,所以可以给行内元素设置不同的css属性,比如宽度、高度、内边距和外边距等。

style 属性规定元素的行内样式(inline style)

行内元素属性设置

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

行内元素同样具有盒子模型,那么就可以给行内元素设置不同的 css 属性,比如宽度、高度、内边距和外边距,那么行内元素是否需要设置这些属性呢?

行内元素设置宽度和高度

给行内元素设置宽度和高度是无效的

1

2

3

4

5

6

.span1 {

    height: 200px;

    width: 200px;

}

  

<span class='span1'>行内元素设置宽度和高度</span>

此时我们通过观察页面以及盒子的渲染出来的模型,可以发现:

即使给行内元素设置了宽度和高度,行内元素所表现出来的具体的宽度和高度就是内容本身的宽度和高度,所以给行内元素设置宽和高是无效的

行内元素设置 padding 和 margin

将影响左右,但不影响上下

行内元素设置 padding 和 margin 上下具体值表现

1

2

3

4

5

6

7

8

<span class='span2'>行内元素设置边距上下属性</span><br>

  

.span2 {

    padding-top: 20px;

    padding-bottom: 30px;

    margin-top: 40px;

    margin-bottom: 50px;

}

从上面的图我们可以发现,我们给行内元素设置了 padding-top、padding-bottom、margin-top、margin-bottom 属性,但是这些属性并没有发生具体的作用,在效果上看貌似是被撑开了,但是并没有对其他的元素造成影响。

阅读剩余部分

相关阅读 >>

html怎样用style添加属性示例

ie8兼容的重要属性x-ua-compatible

css盒模型有哪些属性

css属性为什么要加前缀

css中更改透明度的属性是什么

css中的透明度属性是什么

css属性可分为哪几大类

html button标签的属性有哪些

css中无继承性的属性有哪些

html input标签的属性有哪些

更多相关阅读请进入《行内》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...