html - Span is smaller than the parent div, why? -

why span smaller it's parent div?

.class1 {    background-color: red;    border: solid thin;    padding: 0px;    margin: 0px;  }  .class1 span {    background-color: yellow;    font-size: 60px;  }

<div class="class1">    <span>drawback</span>  </div>

the reason nature of default display style both div , span elements.

the display css property specifies type of rendering box used element. in html, default display property values taken behaviors described in html specifications or browser/user default stylesheet. default value in xml inline.

div elements block level elements (respect dimension, take full width default) span elements inline elements (content determines dimension, purposes handled in similar way text).

as such, want match 2 display types setting display:block child span. alternatively, span no longer behaving span should, change div

.class1 {    background-color: red;    border: solid thin;    padding: 0px;    margin: 0px;  }  .class1 span {    background-color: yellow;    font-size: 60px;    display: block; /* <---- add */   }

<div class="class1">    <span>drawback</span>  </div>