CODEWITHSUNDEEP
htmlcss
bernie2436
bernie2436

Reputation: 23911

Why doesn't this span inherit the padding of its parent?

I have this HTML 

<span class="captionsection">Notes: <span class="grey">Lot behind chain-link fence was trimmed and well-maintained.</span></span>

And this css

.captionsection {
padding-top: 5px;
padding-left: 5px;
}

I thought that the inner span would inherit the padding of the outer span .captionsection? But this is not the case. CSS padding keeps inheriting

How can I fix this?

enter image description here

Upvotes: 0

Views: 2401

Answers (4)

Shahar
Shahar

Reputation: 1677

Use display: block; Otherwise, span won't inherit the padding.

CSS:

.captionsection {
    padding-top: 5px;
    padding-left: 5px;
    display: block;
}

Fiddle:

http://jsfiddle.net/JmV85/

Upvotes: 0

PurkkaKoodari
PurkkaKoodari

Reputation: 6809

First of all, paddings are not inherited. But this is not the thing you mean, I believe, but that the second line is not indented.

A <span> is, by default, inline. This means it will be first layout as one line and then, if necessary, split to lines.

Here, the padding is only added to the first line because of this.

To make it work, you'll have to make the outer span a block or inline-block with the display property.

Upvotes: 1

Jon
Jon

Reputation: 437474

This doesn't work as expected because <span> is an inline element. Padding is not applied "in the middle" of its content, which includes the position the text wraps around.

If you wanted to keep the left padding for the whole height of the content in your example, you should have used a block element such as <div> for .captionsection.

Example fiddle

I should also mention that padding is not inherited (with the CSS meaning of the word "inherited") by child elements as you say -- but even if it were, you still would not have gotten the expected left padding after the wrap because of the above.

Upvotes: 1

Marius George
Marius George

Reputation: 526

Child elements do not inherit padding from parent elements.

Upvotes: 1

Related Questions