CSS inline-block: how does it work?

Daniele Brunengo
Daniele Brunengo used Ask the Experts™
on
Hello, so I have the following code setup:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      
    body { background-color: #2574b0; }
      
    .menullo {
	font-size:15px;
	color:#ffffff;
	padding:10px 15px 5px 15px;
	background-color:#2626B3;
	width:206px;
	min-height:80px;
	font-size:20px;
	text-align:center;
	display:inline-block;
	margin:0 5px 10px 0;
}
    </style>
  </head>
  <body>
        <div style="width:100%; position:relative;top:10px;height:600px; text-align:center;">

			<div>
              <div class="menullo">
              Line1<br />
              Line2<br />
              &nbsp;
              </div>
              <div class="menullo">
              Line1<br />
              Line2<br />
              Line3
              </div>
            </div>
      </div>
  </body>
</html>

Open in new window


There's always something or other about css that's bugging me to no end. In this instance, can someone explain to me why, if I remove the &nbsp; from the first "menullo" div, that same div gets out of line? It lowers itself about 25 px, see pictures:

With nbspWithout nbsp
Can some good samaritan explain this to me?
Thanks a lot guys.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014
Commented:
Add to the menullo class

vertical-align: top;
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
Thanks a lot. But still, why does this happen? Does the content of the divs influence their alignment?
Expert of the Year 2014
Top Expert 2014

Commented:
By default the vertical-align is baseline for inline elements, so you need to override it.
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
Ok, thanks a lot.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial