CSS inline-block: how does it work?

Posted on 2014-08-27
Last Modified: 2014-08-27
Hello, so I have the following code setup:

<!DOCTYPE html>
    <style type="text/css">
    body { background-color: #2574b0; }
    .menullo {
	padding:10px 15px 5px 15px;
	margin:0 5px 10px 0;
        <div style="width:100%; position:relative;top:10px;height:600px; text-align:center;">

              <div class="menullo">
              Line1<br />
              Line2<br />
              <div class="menullo">
              Line1<br />
              Line2<br />

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.
Question by:Daniele Brunengo
    LVL 58

    Accepted Solution

    Add to the menullo class

    vertical-align: top;

    Author Comment

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

    Expert Comment

    By default the vertical-align is baseline for inline elements, so you need to override it.

    Author Comment

    by:Daniele Brunengo
    Ok, thanks a lot.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Mobile or not?? 4 27
    Bing Maps 1 23
    Jquery oncheck to update SPAN 31 34
    CSS question related to hyperlinks 9 22
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    755 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now