CODEWITHSUNDEEP
htmlcss
R_User
R_User

Reputation: 11082

How to make an inline-element to occupy space above and below itself within a text using CSS?

In the following code I try to format the strong element in a way, that it occupies additional space (1em) around itself. The text to the left an the right is displaced by the strong-element, but the additional space at the bottom and the top does not displace the text. How can I solve that problem?

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

Upvotes: 0

Views: 477

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201708

If you mean that there should be empty space above and below the strong element, causing rather gross appearance when lines are so apart, add

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

The value inline-block is not supported by some browsers that are outdated but still in some use. In that case, the margin settings are ignored, too.

Upvotes: 1

mkjeldsen
mkjeldsen

Reputation: 2180

You can do it with the line-height property, like this, but 1em is already default vertical distance. It also displaces the whole line (not just text immediately above and below), which may or may not be desirable.

Upvotes: 1

Related Questions