html/css alignment issue because of an empty . What is moving my content down?


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:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/6exQ5.png" data-original="https://i.stack.imgur.com/6exQ5.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/zcwtA.png" data-original="https://i.stack.imgur.com/zcwtA.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Why is it doing this? What can I do to solve this?


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

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


  • Bundled scripts not working MVC
  • css Star-rating html
  • How to align an image side by side with a heading element?
  • Java : How to tint this PNG programmatically?
  • Angular - routerLinkActive and queryParams handling
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • Flex items with same property values are rendering in different sizes
  • Is it possible to get the word under the mouse cursor in a ``?
  • C++ friend class std::vector
  • How to split circle in to the sectors in google maps?
  • SyntaxError: (irb):26: both block arg and actual block given
  • D3 get axis values on zoom event
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Insert into database using onclick function
  • How reduce the height of an mschart by breaking up the y-axis
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to check if every primary key value is being referenced as foreign key in another table
  • Validaiting emails with Net.Mail MailAddress
  • MySQL WHERE-condition in procedure ignored
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • trying to dynamically update Highchart column chart but series undefined
  • python regex in pyparsing
  • How to set the response of a form post action to a iframe source?
  • Android Google Maps API OnLocationChanged only called once
  • java string with new operator and a literal