Question

在下面的代码中，我尝试以某种方式格式化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>

Answer 1

您可以使用line-height属性like this执行此操作，但1em已经是默认的垂直距离。它也会取代整条线（不仅仅是上方和下方的文字），这可能是也可能不是。

Answer 2

如果你的意思是strong元素上方和下方应该有空格，当线条如此分开时会造成相当大的外观，请添加

strong { display: inline-block; margin: 0.5em 0; }

某些过时但仍处于某种用途的浏览器不支持值inline-block。在这种情况下，margin设置也会被忽略。

如何使用CSS使内联元素在文本中占据空间上下？

2 个答案: