CODEWITHSUNDEEP
css
kjo
kjo

Reputation: 35311

Why the extraneous padding-bottom and/or margin-bottom?

This jsFiddle illustrates what this question refers to (full code below). Note that, even though #outer-div should have 0 padding, and #inner-div should have 0 margin-bottom, it appears as though the there's some padding and/or margin between the bottom edges of #outer-div and #inner-div.

Where does this come from, and, more importantly, how can I suppress it?

css

html,body,div{margin:0;padding:0;border:0;outline:0}
body{background:white;}
#outer-div{
  background:lightgray;
  margin-top:20px;
  text-align:center;
}
#inner-div{
  background:black;
  display:inline-block;
}

html

<!doctype html>
<body>
<div id="outer-div">
  <div id="inner-div" style="background:black;width:100px;height:100px;">
    <div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;">
      <div style="background:white;margin:1px;width:94px;height:94px;"></div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 67

Answers (1)

j08691
j08691

Reputation: 207901

Inline elements are sensitive to white space and that gap is reserved for descender elements. Adding vertical-align:top to #inner-div is one way to fix this:

#inner-div {
    background:black;
    display:inline-block;
    vertical-align:top;
}

jsFiddle example

A second way is to set font-size:0 on the parent element in this jsFiddle example.

Upvotes: 1

Related Questions