troubleshooting Question

CSS inline-block: how does it work?

Avatar of Daniele Brunengo
Daniele BrunengoFlag for Italy asked on
CSSWeb DevelopmentHTML
4 Comments1 Solution475 ViewsLast Modified:
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>

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.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros