行内属性指的是行内style属性,而style属性就是规定元素的行内样式,并且因为行内元素同样具有盒子模型,所以可以给行内元素设置不同的css属性,比如宽度、高度、内边距和外边距等。
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中文网!
以上就是行内属性什么意思?的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2955810.html