Geek Answers Handbook

Html / css alignment issue due to empty <span>. What carries my content?

I have alignment problem in html / css. I simplified my problem:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        span { display: inline-block; height: 50px; }
        span.text { background-color: Yellow;}
        span.left, span.right { background-color: Red;  width: 20px;}
    </style>
</head>
<body>
    <span class="left">x</span>
    <span class="text">Text comes here</span>
    <span class="right">x</span>
</body>
</html>

The output in the browser is expected:

enter image description here

However, span.left and span.right should not contain any content. They are for layout purposes only. But when I delete the contents ("x") of both spans as follows:

<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>

The output changes to this:

enter image description here

Why is he doing this? What can I do to solve this problem?

+5
source share
1 answer

Vertical alignment is problematic because it is set to the default baseline. Just change it on top:

span { display: inline-block; height: 50px;vertical-align:top; }
+4
source

More articles:


All Articles