在下面的代码中，我尝试以某种方式格式化strong元素，使其在自身周围占用额外的空间(1em(。左侧和右侧的文本被强元素取代，但底部和顶部的额外空间不会替换文本。我该如何解决这个问题？
<html>
<head>
<title>CSS test</title>
<style type="text/css">
h1 {
text-decoration: underline;
}
strong {
padding: 1em;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>test</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure <strong>dolor</strong> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>
如果您
的意思是strong元素上方和下方应该有空白区域，当线条如此分开时会导致相当粗糙的外观，请添加
strong { display: inline-block; margin: 0.5em 0; }
某些已过时但仍在使用中的浏览器不支持值 inline-block。在这种情况下，也会忽略margin设置。
您可以使用
line-height 属性执行此操作，如下所示，但1em已经是默认的垂直距离。它还会替换整行(不仅仅是紧靠上方和下方的文本(，这可能是可取的，也可能是不可取的。