网站建设资讯

NEWS

网站建设资讯

行内属性什么意思?

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

乐清网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联

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

行内元素属性设置

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

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

行内元素设置宽度和高度

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

.span1 {
    height: 200px;
    width: 200px;
}
 
行内元素设置宽度和高度

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

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

行内元素设置 padding 和 margin

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

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

行内元素设置边距上下属性
.span2 { padding-top: 20px; padding-bottom: 30px; margin-top: 40px; margin-bottom: 50px; }

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

行内元素设置 padding 和 margin 左右具体值表现

会发生效果

行内元素设置边距左右属性
.span3 { padding-left: 100px; padding-right: 200px; margin-left: 300px; margin-right: 400px; }

从上图可以看出,如果我们给行内元素设置 padding-left,padding-right,margin-left,margin-right 属性 将会影响该行内元素的位置

更多相关知识,请访问PHP中文网!
名称栏目:行内属性什么意思?
链接URL:http://njwzjz.com/article/chdhhs.html