Question

请看看https://jsbin.com/jodorazone/1/edit?html,css,output

如果我将父级设置为display: block，则仅考虑padding个子级。如果设置为display: flex，则在父级padding中将子级与padding一起呈现。

为什么会这样？

Answer 1

这是因为span在默认情况下是inline元素，并且在顶部/底部填充将不会影响高度。如果要设置填充，只需设置span display: block。参考：https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

body {
  margin: unset;
}

button, div {
  display: block; 
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border: 1px solid black;
}

button span,
div span {
  /* if button, div is set to display: block, their (parent) padding isn't factored in */
  padding: 10px;
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div><span>div</span></div>
  <button><span>button</span></button>
</body>
</html>

关于display: flex的行为：

弹性项目的显示值被阻止：如果指定生成弹性容器的元素的流入子视图的显示是一个内联级别的值，它计算为其等效的块级别。（有关的详细信息，请参见CSS2.1§9.7[CSS21]和CSS Display [CSS3-DISPLAY] 这种类型的显示值转换。）

参考：https://www.w3.org/TR/css-flexbox-1/#flex-containers

CSS：显示：弹性与显示：块填充行为

1 个答案: