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

要素の上下に空のスペースが必要でありstrong、行が離れていると見た目がかなり粗くなる場合は、次のように追加します。

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

この値inline-blockは、時代遅れでありながらまだ使用されている一部のブラウザではサポートされていません。その場合、margin設定も無視されます。

于 2012-05-02T12:12:28.863 に答える
1

this のようline-heightにプロパティでそれを行うことができますが、すでにデフォルトの垂直距離です。また、行全体 (すぐ上と下のテキストだけでなく) も置き換えられますが、これは望ましい場合とそうでない場合があります。1em

于 2012-05-02T11:23:08.797 に答える