html - What is causing this strange grid behavior causing gaps with certain font sizes and doctype?

Consider the following example where I have two grids with items of various font sizes:

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 8rem; background-color: white">D</span></span>
</div>

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 0.1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 0.2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 0.4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 0.8rem; background-color: white">D</span></span>
</div>

Consider the following example where I have two grids with items of various font sizes:

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 8rem; background-color: white">D</span></span>
</div>

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 0.1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 0.2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 0.4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 0.8rem; background-color: white">D</span></span>
</div>

I was expecting the right grid to be a proportionally scaled version of the left grid however the items with smaller font sizes (right grid) appear to have a minimum height restriction on them and do not shrink to fit like the items with larger font sizes (left grid).

Strangely: if I remove the <!doctype html> from my webpage it looks correct and the expected behavior is shown where the left and right grid have similar gaps proportionally.

What is causing this and how can I ensure my grid always shrinks regardless of font size?

Share Improve this question asked Feb 5 at 16:17 Louis Quinn 955 bronze badges

It seems that browser's in quirks mode (no doctype declaration) may treat their default row height differently from when a doctype html is specified. In my testing (Chrome/Edge Windows11) in quirks mode there didn't seem to be any 'acknowledgment' of the prevailing (ie set in the html element) line height or font-size to set the row height, hence the smaller font-sizes set the row height whereas in the standards mode the 'standard' 16px sets the row height if nothing else is specified. – A Haworth Commented Feb 6 at 9:31

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Remember that the parent element is also having a font-size value. If you want things to scale proportionality, you have to adjust the font-size of the whole grid.

I am using em with the child and I moved the rem to the grid container

.box {
  display: inline-grid;
  vertical-align: top;
}

<div class="box" style="font-size: 1rem;">
  <span style="background-color: red"><span style="font-size: 1em; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 2em; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 4em; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 8em; background-color: white">D</span></span>
</div>

<div class="box" style="font-size: .1rem">
  <span style="background-color: red"><span style="font-size: 1em; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 2em; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 4em; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 8em; background-color: white">D</span></span>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - What is causing this strange grid behavior causing gaps with certain font sizes and doctype? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)