行內元素屬性設置

行內元素一樣具備盒子模型

行內元素一樣具備盒子模型，那麼就能夠給行內元素設置不一樣的 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 屬性 將會影響該行內元素的位置