关于inline元素padding生效及span元素padding使其超出容器上方的技术疑问

嘿，咱们来拆解这两个CSS问题，一个个说清楚：

你之前看到的“inline元素padding不生效”的说法其实是不准确的——inline元素的padding是完全生效的，只是它的表现和block元素有区别：

• 左右方向的padding：和block元素一样，会直接影响元素的水平空间，把周围的元素挤开；
• 上下方向的padding：虽然会让元素的背景区域上下扩展，但不会改变当前行的行框高度（简单说就是不会把其他行的元素挤下去），所以有时候会给人“没生效”的错觉，但实际上背景和点击区域都是包含padding的。

简单总结：inline元素的padding是生效的，只是垂直方向的padding不会影响布局流的高度，但视觉上是存在的。

这个问题要结合你代码里的几个关键属性来分析：

1. 父级div的设置：display: inline-block; vertical-align: bottom;——这个vertical-align: bottom会让父级inline-block元素的底部边缘对齐到当前行的底部；
2. span的默认属性：span是inline元素，默认的vertical-align: baseline（基线对齐）；
3. padding的百分比规则：你给span设置的padding: 10%，这里的百分比是相对于父元素的宽度计算的（CSS里padding的百分比上下左右都是基于包含块的宽度），父级div宽150px，所以span的上下左右padding都是15px；

现在来梳理对齐逻辑：

• 空的inline元素（你的span里没有内容）的基线等于它的底部边缘（也就是padding-bottom的外边缘）；
• 父级inline-block的基线是它内部最后一个inline元素的基线，也就是span的基线；
• 父级设置了vertical-align: bottom，所以父级的底部边缘会对齐到行的底部；
• 因为span的基线（底部边缘）要和父级的基线对齐，而父级的底部已经对齐到行底，所以span的底部会和父级的底部重合；
• 但span有15px的padding-top，这部分会让span的背景向上延伸15px，超出父级div的顶部，看起来就像是span被“推到”了父级的上方。

如果想让span在父级内部对齐，你可以给span加上vertical-align: bottom，这样它的底部就会和父级的底部对齐，padding-top就会在父级内部向上扩展了。

你的示例代码： #

CSS代码：

body > div { 
  width: 150px; 
  height: 150px; 
  background: black; 
  margin-top: 40px; 
  display: inline-block; 
  vertical-align: bottom; 
}
div > div, div > span{ 
  border-radius: 5px; 
  padding: 10%; 
  background: red; 
}

HTML代码：

<div> <div> </div> </div>
<div> <span> </span> </div>

内容的提问来源于stack exchange，提问作者ivaylo