How to change height of span inside div content height?

Asked Jul 09 '20 at 05:13

Active Jul 09 '20 at 05:13

Viewed 30 times

   HTML: 

    <!DOCTYPE html>
        <html>
          <head></head>
          <body>
            <div id="header">
              <span>New Colors</span>
              <span>Easy</span>
              <span class="selected">Hard</span>
            </div>
          </body>
        </html>
    CSS:

    body{
      background: #232323;
    }
    
    #header{
      background: white;
      height: 30px;
    }
    
    div#header span{
      height: 100%;
    }
    .selected{
      background: steelblue;
    }

Why span height is not equal to div height? div height is 30px, but span height is 17px. My span height is only content height. How can I change span height equal to div height?

enter image description here

asked Jul 09 '20 at 05:13

Rinkal Bhatia

4

Because `` is inline element and does not respect width/height rule. Use `display: inline-block` – Justinas Jul 09 '20 at 05:16
one approach is to set `line-height` for `span` to `30px`. – Prashant Ghimire Jul 09 '20 at 05:17

How to change height of span inside div content height?

0 Answers0