Additional margin of 5px when inline-table or inline block is used

Question

 <div id="hello">
      <ul>
          <li>Hello</li>
          <li>Hello</li>
      </ul>
 </div>

And css for the above html

  #hello{
     margin:0px;
     padding:0px;
     border:1px solid black;
     float:left;
  }
  #hello ul{
      position:relative;
      display: inline-block;
      list-style:none;
      margin:0px;
      padding:0px;
  } 
  #hello li{
       float:left;
  }

For the above html and css, I always get a additional 5px margin for the ul element.

After meticulously going though each css statements line by line from my code and writing the above example, I was able to find that the problem was due to

    display:inline-block;
    or
    display:inline-table;

What is proper way to over come this?

some other forums suggest to use

"Set font-size: 0; for parent container and font-size: your_size; for children."

Is there any other solution to prevent this so that my font size of 0 doesn't cascade down to children.

Thank you Srikanth

none of the answers worked for you? – abbood Mar 05 '13 at 18:04 — abbood, Mar 05 '13 at 18:04

cimmanon · Answer 1 · 2013-03-05T18:07:17.957

Adding vertical-align: middle; to #hello ul will get rid of the undesirable "padding" at the bottom.

http://jsfiddle.net/xarq5/1/

The default vertical-alignment is usually baseline, which refers to the bottom edge of letters that don't have descenders ("a" or "B" do not have descenders, but "y" or "g" do). The fiddle below makes it a little more obvious where the undesirable "padding" is coming from. It isn't padding at all, but space reserved for the text's descenders.

http://jsfiddle.net/xarq5/11/

p {
    border: 1px solid;
}

p.aligned img {
    vertical-align: text-bottom;
}

<p>Something texty <img src="http://placehold.it/50x50" /></p>

<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>

If the problem is undesirable spacing that happens between inline-block/inline-table elements and you don't want your source to look like a giant run-on sentence, then you can use comments.

<ul>
    <li>a</li><!--
    --><li>b</li>
</ul>

I may not be well versed with vertical alignment Can I get a explanation on why we need to do this ? — Srikan, Mar 05 '13 at 17:56

score 1 · Accepted Answer · edited May 23 '17 at 11:51

try http://jsfiddle.net/xarq5/10/

#hello{
    float: left;
}

and

#hello ul {
    float: left
}

explanation: whenever you have an html element that's containing other floating elements, the containing element doesn't fully "contain" the floating elements unless if it's floated itself..

note: unlike this answer you can keep your html indented as it was (ie don't worry about spacing or the lack thereof):

<body>   
    <div id="hello">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</body>

score 0 · Answer 3 · edited Aug 07 '14 at 19:52

0

Make sure you also set the li to have no margin or padding if you don't want any space. Try to set it to inline only.

edited Aug 07 '14 at 19:52

user428517

4,132
1
22
39

answered Mar 05 '13 at 17:33

kingdomcreation

659
4
10

score 0 · Answer 4 · answered Mar 13 '13 at 06:15

0

You could also set display: block; to ul element set display: inline-block; to li element.

answered Mar 13 '13 at 06:15

Bhojendra Rauniyar

83,432
35
168
231

Additional margin of 5px when inline-table or inline block is used

4 Answers4

Linked

Related