行内元素属性设置

行内元素一样具备盒子模型

行内元素一样具备盒子模型，那么就能够给行内元素设置不一样的 css 属性，好比宽度、高度、内边距和外边距，那么行内元素是否须要设置这些属性呢？

行内元素设置宽度和高度

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

.span1 {
    height: 200px;
    width: 200px;
}

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

此时咱们经过观察页面以及盒子的渲染出来的模型，能够发现：

即便给行内元素设置了宽度和高度，行内元素所表现出来的具体的宽度和高度就是内容自己的宽度和高度，因此给行内元素设置宽和高是无效的

行内元素设置 padding 和 margin

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

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

<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 属性，可是这些属性并无发生具体的做用，在效果上看貌似是被撑开了，可是并无对其余的元素形成影响。

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

会发生效果

<span class='span3'>行内元素设置边距左右属性</span><br>

.span3 {
    padding-left: 100px;
    padding-right: 200px;
    margin-left: 300px;
    margin-right: 400px;
}
复制代码

从上图能够看出，若是咱们给行内元素设置 padding-left,padding-right,margin-left,margin-right 属性 将会影响该行内元素的位置