2017.9.13 行内元素的盒模型解析

行内元素的padding和margin是否无效

1——首先行内元素是否具有盒子模型?
答:行内元素同样具有盒子模型。

2——行内元素的padding、margin是否无效?
答:

  • 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
  • 行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的
  • 行内元素的padding-top、padding-bottom从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。
    de  >
      
      Document
      
    
    
      我是span
      
    我是div
    de>

    2017.9.13 行内元素的盒模型解析_第1张图片

观察上面这张图,

  • span标签左右外边距10px,说明行内元素的margin-left设置是有效的
  • span标签左右内边距30px,说明行内元素的padding-left设置是有效的
  • span标签上边距为0px,下边距为30px,说明行内元素的padding-top设置是无效的。
  • div标签中的文字de >我是divde>和span标签中的文字de >我是spande>两行相连接,并没有任何间距,说明行内元素的padding-top、padding-bottom并没有被撑开,只是从显示效果上看貌似被撑开了。

你可能感兴趣的:(2017.9.13 行内元素的盒模型解析)