天天看點

CSS - 行内元素的 padding、margin、width、height、line-height 是否無效?

1、首先行内元素是否具有盒子模型?

答:行内元素同樣具有盒子模型。

2、行内元素的 padding、margin、width、height、line-height 是否無效?

答:

  • 行内元素的 padding-top、padding-bottom、margin-top、margin-bottom 屬性設定是無效的。
  • 行内元素的 padding-left、padding-right、margin-left、margin-right 屬性設定是有效的。
  • 行内元素的 padding-top、padding-bottom 從顯示的效果上是增加的,但其實設定的是無效的。并不會對他周圍的元素産生任何影響。
  • 行内元素的 line-height 屬性設定是有效的。
  • 行内元素的 width、height 屬性設定是無效的。
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            background-color: red;
            margin:10px;
            padding: 30px;
            /* line-height: 100px; */
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <div>我是div1我是div1我是div1我是div1我是div1</div>
    <span>我是span</span>
    <div>我是div2我是div2我是div2我是div2我是div2</div>
</body>      
CSS - 行内元素的 padding、margin、width、height、line-height 是否無效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否無效?
  • span 标簽左右外邊距10px,說明行内元素的 margin-left、margin-right 設定是有效的。
  • span 标簽上下外邊距10px,說明行内元素的 margin-top、margin-bottom 設定是無效的。
  • span 标簽左右内邊距30px,說明行内元素的 padding-left、padding-right 設定是有效的。
  • span 标簽上邊距為 <div>我是div1...</div>的自動擴充高度,下邊距為30px,說明行内元素的 padding-top 設定是無效的。
  • div 标簽中的文字“我是div”和 span 标簽中的文字“我是span”兩行相連接配接,并沒有任何間距,說明行内元素的padding-top、padding-bottom 并沒有被撐開,隻是從顯示效果上看貌似被撐開了。
  • 如果取消注釋的話(圖右),span 标簽上下 line-height 100px有效的。
  • span 标簽 width、height 500px 是無效的。