CODEWITHSUNDEEP
htmlcss
kisung Tae
kisung Tae

Reputation: 237

padding still exists when height and width of span are 0 with only padding-left set to 20px

Here is my setup: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
span {
  padding-left: 25px;
  background: red;
}
<span></span>

I have span tag with settings of box-sizing:border-box and padding-left:25px. When this span tag does not have any values in it, its height and width are 0. So I expect the span tag not to display on the web page. However, It is still there, I think it is because of the padding-left. But I only set the padding-left so it still does not have height to display. But as you can see in jsfiddle, the padding displays on the webpage......

Why does it happen?

Upvotes: 6

Views: 1276

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241008

The box-sizing property only applies to elements that accept a width or height. By default, a span element is a non-replaced inline element, which means that the width property doesn't apply to it, thus the box-sizing property doesn't apply to it either.

For reference, here is a relevant link to the specification regarding which elements the box-sizing property applies to:

3. Box Model addition - 3.1. box-sizing property

Applies to: all elements that accept width or height

Here is the relevant quote and link to the specification regarding the width property and non-replaced inline elements:

10.2 Content width: the 'width' property

This property [width] does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

Therefore, if you change the display property of the span element to inline-block or block, then the element won't appear (as you seem to be expecting):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
span {
  padding-left: 25px;
  display: inline-block;
  background: #f00;
}
<span></span>

Upvotes: 4

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

make the span display:block or inline-block the will remove the extra space.

Upvotes: 0

Related Questions