Can not padding DIV element

Question

I have listed HTML and CSS code below.

.a{
    border-bottom: 1px solid #000;
}
.b {
    border-bottom: 1px solid #000;
}
.c li{
    display: inline;
    padding-top: 50px;
}

<div class="a">
    <br>
    <br>
    <br>
</div>
<div class="b">
    <br>
    <br>
    <br>
</div>
<div class="c">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>

But I can't control padding / margin <div class="c">. Why and how do I fix this?

Enter image description here

If you do not wish to use display:inline-block, you will have to add the padding to the ul rather than the li. — EricBellDesigns, Jan 12 '15 at 23:44

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Padding does not behave as you expect on inline elements.

As Alohci pointed out in comment below, padding doesn't affect line-height for non-replaced inline elements, thus not affecting height of parent element.

You can use display: inline-block instead (see below).

Note that inline-block is not supported in IE <= 7. If you care about archaic browsers, you may use floats instead.

.a{
 border-bottom: 1px solid #000;
}
.b {
 border-bottom: 1px solid #000;
}
.c li{
 display: inline-block;
 padding-top: 50px;
}

<div class="a">
 <br>
 <br>
 <br>
</div>
<div class="b">
 <br>
 <br>
 <br>
</div>
<div class="c">
 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
 </ul>
</div>

edited May 23 '17 at 12:19

Community

1
1

answered Jan 12 '15 at 23:43

Alex Shesterov

26,085
12
82
103

1

"applicable" is not the correct term. Padding *is* applicable to inline (both replaced and non-replaced) elements, and you can see this by giving the element a non-transparent background. But for non-replaced inline elements, the padding does not affect the line height of the element and hence does not affect the height of the containing block element, which is why the position of the li elements isn't affected by the top padding. – Alohci Jan 13 '15 at 00:00

score 1 · Answer 2 · edited May 23 '17 at 12:07

Your li elements are inline, changing to inline-block will solve this issue. See this SO question/answer to understand the difference between inline and inline-block: What is the difference between display: inline and display: inline-block?

.a{
 border-bottom: 1px solid #000;
}
.b {
 border-bottom: 1px solid #000;
}
.c li{
 display: inline-block;
 padding-top: 50px;
}

<div class="a">
 <br>
 <br>
 <br>
</div>
<div class="b">
 <br>
 <br>
 <br>
</div>
<div class="c">
 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
 </ul>
</div>

Can not padding DIV element

2 Answers2