6

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?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
kisung Tae
  • 217
  • 5
  • 19

2 Answers2

4

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>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Thanks for quick response, I understand that. Can I ask one thing? um is it normal behaviour that the padding of span tag displays even if it does not have value which means content's height and width are 0? – kisung Tae Feb 10 '17 at 06:13
  • since only the padding-left is set – kisung Tae Feb 10 '17 at 06:16
  • @kisungTae - Yes, that's normal behavior. In your case a `span` element with content is treated the same way as a `span` element without content. Even with just `padding-left`, it will still show up due to the way padding works in CSS. It doesn't additionally need top/right/bottom padding in order to appear - [this answer](http://stackoverflow.com/a/7073558/2680216) has a visual demonstration of this. It may be helpful in addition to my answer. – Josh Crozier Feb 10 '17 at 06:24
  • Thanks for detailed answer!! – kisung Tae Feb 10 '17 at 06:25
0

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

Shahil M
  • 3,836
  • 4
  • 25
  • 44