0

After adding <!doctype html>, my HTML just gets break. <!doctype html> is doing some strange behavior. enter image description here 

<!doctype html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>

<div id="bar-sticky">
<span id="sec-menu"><i class='fa fa-bars'></i></span>
<span id="sec-search"><i class='fa fa-search'></i></span>
</div>

Here the size of tag <i> is different than the parent tag <span>'s size when there is no padding/margin. Then from where this strange space is coming from?

I have tried in so many ways like - verticle-align: middle; box-sizing: border-box; white-space: nowrap; word-wrap: normal;none; (*) of them worked. How to deal with it? In quirks mode - everything is just fine.

Alo
  • 53
  • 6
  • Try removing the external css and classes and then compare again. CSS resets are also a thing for some reason. Though at the end of the day I'm not sure why it matters -- if you need them to be the same size, apply a size explicitly (width or grid/flex etc.) – Roddy of the Frozen Peas Sep 06 '21 at 12:27
  • @Roddy of the Frozen Peas, it doesn't have any external CSS/Classes. It's also happening here (in StackOverflow's code snippet). It's important that span doesn't get extra space. Even I apply for a size using width or grid/flex this issue still remains the same. (Span gets the extra strange space!) – Alo Sep 06 '21 at 12:35
  • That link tag is an external stylesheet. The `fa` classes are external classes from that. – Roddy of the Frozen Peas Sep 06 '21 at 13:01
  • add vertical-align:top to your span and icons – Temani Afif Sep 06 '21 at 13:55
  • ^ and make your span display:inline-block – Temani Afif Sep 06 '21 at 13:58
  • and in case you also want the div to have the same size, you need to add to it line-height:1 – Temani Afif Sep 06 '21 at 13:58

0 Answers0