Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS inline-block: how does it work?

Posted on 2014-08-27
4
Medium Priority
?
410 Views
Last Modified: 2014-08-27
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.
0
Comment
Question by:Daniele Brunengo
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40288406
Add to the menullo class

vertical-align: top;
0
 

Author Comment

by:Daniele Brunengo
ID: 40288418
Thanks a lot. But still, why does this happen? Does the content of the divs influence their alignment?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40288441
By default the vertical-align is baseline for inline elements, so you need to override it.
0
 

Author Comment

by:Daniele Brunengo
ID: 40288459
Ok, thanks a lot.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question