0

在下面的代码中，我尝试以strong某种方式格式化元素，即它在自身周围占据额外的空间 (1em)。左边和右边的文本被 strong-element 替换，但底部和顶部的额外空间不会替换文本。我该如何解决这个问题？

<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>
4

2 回答 2

1

您可以使用line-height属性来执行此操作，例如 this，但1em已经是默认垂直距离。它还取代了整行（不仅仅是上面和下面的文本），这可能是可取的，也可能不是可取的。

于 2012-05-02T11:23:08.797 回答
1

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

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

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

于 2012-05-02T12:12:28.863 回答