Inline Behavior of an Element

[kwerty]

Hello All,

1 – Could someone explain why span tag is overlapping the <hr> element tag?

2 – The desired result is achieved by setting display property to inline-block or setting high line-height value.

3 – How can I fix this issue without setting display to inline-block.

Thanks.

Demo: http://codepen.io/anon/pen/qEMyOg

[Paulie_D]

Because padding on inline elements is kind quirky…adding increased the visual size but does nothing to affect the block context of the span…as such it doesn’t move. It’s in the CSS2 spec.

You can find a whole article on it at http://maxdesign.com.au/news/inline/..but the important parts are:

The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property.

While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.

What’s wrong with inline-block…it seems to be exactly what you are looking for?

[Paulie_D]

Since we know this:

height of the box is given by the ‘line-height’ property.

We can use calc to play with line-height like this

span {
  background: red;
  padding: 25px;
  line-height: calc(1em + 50px);
}

http://codepen.io/Paulie-D/pen/XJPBpP

[kwerty]

Thanks for the info and the link. I just wanted to know that are there any other ways to fix the issue without using display or line-height property.

[Paulie_D]

I just wanted to know that are there any other ways to fix the issue without using display or line-height property.

Basically…no. That’s that nature of inline elements. Annnoying perhaps but that where we are.

[Author]

Posts