为什么下一个块元素的框从上一个块元素的内容而不是前一个元素的边界开始？

Question

当我发现后续的块元素是从上一个块元素的内容开始而不是紧接在上一个块元素的边距之后，我正在编写一些HTML并设置其样式。 我有一个块元素和一个内联元素作为孩子。 内联元素在底部有一个填充，并有一个边框。 我在第一个之后直接创建了另一个block元素，检查此页面后，我注意到了上面的内容。 我想念什么吗？ 谢谢！

 #last-updated-timestamp { font-weight: normal; font-style: italic; padding-bottom: 10px; border-bottom: 2px solid #e6e6e6; margin-bottom: 0px; } 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"> <title>Test</title> </head> <body> <div id="profile"> <span id="last-updated-timestamp">Last updated Jan 1, 2019</span> </div> <div id="flex-container"> </div> </body> </html> 

Answer 1

您不能在行内元素的顶部/底部添加页边距/填充，浏览器对它们的处理方式有所不同。

也许使用inline-block代替？