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?

Answer 1

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>

Answer 2

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>