Home/ Questions/Q 6328487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:28:00+00:00

See this jsfiddle for example: http://jsfiddle.net/FrJRA/1/ and note that the inner span’s border overlaps

  • 0

See this jsfiddle for example:
http://jsfiddle.net/FrJRA/1/
and note that the inner span’s border overlaps the containing div.

I sort of understand what is happening. But I don’t understand why. Why isn’t the size of the div increased to allow for the new height of the span?

I know I can use display: inline-block if I want this to happen, but what is the reasoning behind inline failing to increase parent container size?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Inline elements only change their dimensions for padding in the left/right dimensions. It doesn’t increase the dimension of the element in the top/bottom directions. That’s why you notice it increasing it on the sides but not on the top/bottom.

    Update:
    Found the part of the W3 specification that touches on this.

    The vertical padding, border and margin of an inline, non-replaced box
    start at the top and bottom of the content area, and has nothing to do
    with the ‘line-height’. But only the ‘line-height’ is used when
    calculating the height of the line box. CSS 2.1 Spec

    • 0