CSS：显示：flex 与显示：块填充行为
[英]CSS: display: flex vs. display: block padding behaviour
问题描述
请看https://jsbin.com/jodorazone/1/edit?html,css,output
如果我将 parent 设置为display: block ，则只考虑孩子的padding 。 如果设置为display: flex ，孩子沿着渲染padding父的内部padding 。
为什么它的行为是这样的？
1 个解决方案
解决方案1
1 已采纳 2019-01-08 08:47:38
这是因为默认情况下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行为：
flex 项的显示值是块化的：如果生成 flex 容器的元素的 in-flow 子项的指定显示是内联级值，则计算到它的块级等效值。 （有关此类显示值转换的详细信息，请参阅 CSS2.1§9.7 [CSS21] 和 CSS Display [CSS3-DISPLAY]。）
显示柔性和显示块的CSS问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.