行內元素設定內邊距和外邊距的問題

試圖給行內元素設定內邊距的時候出現了點問題，給塊級元素設定內外邊距都有明顯的效果，那麼給行內元素設定內外邊距是否有效果呢。

>

*span
divstyle
>
>
>
我是spanspan
>
>
我是divdiv
>
body
>

3.結果分析

可以看到padding-left設定成功，padding-right設定成功,padding-top和padding-bottom的設定出現了問題。

span的padding-bottom好像設定成功，但對實際的布局沒有影響，只是蓋住了div的背景顏色。

4.結論

行內元素在水平方向上的內邊距設定是有效的，在垂直方向上的內邊距設定是無效的。

5.補充

>

我是span1span
>
>
我是span2span
>
>
我是span3span
>
>
我是span4span
>

給span1,span2,span3,span4分別設上10px的上、右、下、左內邊距後

注：中間的空白間隙是換行符導致的

>

*span
divstyle
>
>
>
我是span1span
>
>
我是span2span
>
>
我是span3span
>
>
我是divdiv
>
body
>

3.結果分析

margin-left和margin-righ設定成功，margin-top和margin-bottom設定出現問題

margin-top和margin-bottom的設定並沒有對布局產生影響

4.結論

行內元素在水平方向上的外邊距設定是有效的，在垂直方向上的內邊距設定是無效的。

行內元素在水平方向上設定內外邊距是有效的，在垂直方向上設定內外邊距是無效的。

在垂直方向上給行內元素設定內邊距，在顯示上是將元素範圍擴大了，但實際上不會對周圍元素有任何影響。

img作為行內元素，但同時也是替代元素，它是可以設定寬高，也可以設定內外邊距的！

內邊距和外邊距

內邊距，在邊框和內容區之間的空白區域。padding 屬性接受長度值或百分比值 或者auto 不允許為負值 1.四個方向內邊距一致時 padding 10px 元素距離外部父元素給邊框的距離均為10px 2.四個方向還可按著上 右 下 左的順序分別定義各內邊距 padding 10px 5px 10...

CSS內邊距和外邊距

一 內邊距 css padding 屬性定義內邊距，即邊框與元素內容之間的空白區域 padding 屬性接受長度值或百分比值，但不允許使用負值 可以依次表達，也可以按照上右下左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值 例如h1 等效於 h1 百分數值是相對於其父元素的 widt...

CSS內邊距黑和外邊距

css margin 外邊距 margin 外邊距 屬性定義元素周圍的空間。margin屬性接受任何長度單位 百分數值甚至負值。margin 清除周圍的 外邊框 元素區域。margin 沒有背景顏色，是完全透明的。margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。marg...