本文摘自PHP中文网,作者藏色散人,侵删。
行内属性指的是行内style属性,而style属性就是规定元素的行内样式,并且因为行内元素同样具有盒子模型,所以可以给行内元素设置不同的css属性,比如宽度、高度、内边距和外边距等。
style 属性规定元素的行内样式(inline style)
行内元素属性设置
行内元素同样具有盒子模型
行内元素同样具有盒子模型,那么就可以给行内元素设置不同的 css 属性,比如宽度、高度、内边距和外边距,那么行内元素是否需要设置这些属性呢?
行内元素设置宽度和高度
给行内元素设置宽度和高度是无效的
1 2 3 4 5 6 |
|
此时我们通过观察页面以及盒子的渲染出来的模型,可以发现:
即使给行内元素设置了宽度和高度,行内元素所表现出来的具体的宽度和高度就是内容本身的宽度和高度,所以给行内元素设置宽和高是无效的
行内元素设置 padding 和 margin
将影响左右,但不影响上下
行内元素设置 padding 和 margin 上下具体值表现
1 2 3 4 5 6 7 8 |
|
从上面的图我们可以发现,我们给行内元素设置了 padding-top、padding-bottom、margin-top、margin-bottom 属性,但是这些属性并没有发生具体的作用,在效果上看貌似是被撑开了,但是并没有对其他的元素造成影响。
相关阅读 >>
更多相关阅读请进入《行内》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者