Home/ Questions/Q 7196417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T20:46:27+00:00

I have an alignment problem in html/css. I simplified my problem to this: <!DOCTYPE

  • 0

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

<!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 as expected:

enter image description here

However, span.left and span.right should not contain any content. They are there for layout purposes only. But when I remove the content (“x”) of both spans like this:

<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 it doing this? What can I do to solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Vertical align is problematic, since it is set to the default baseline. Just change it to top:

    span { display: inline-block; height: 50px;vertical-align:top; }
    • 0