Search code examples
htmlcsscss-grid

h1 with null size in grid layout on firefox

I'm trying to use the grid layout to display my elem in a header, in the firefox browser (v 63.0), as well as in chrome (v 70.0.3538.77) and all of them are displaying correctly, except for the h1 which somehow keeps a null size (but is still visible, see screenshot for further details) despite the cell being big enough for him (I've tested by putting it outside of the grid and checking its size.)

Here is the html (in pug) 

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous")
link(rel="stylesheet" href="/style/header.css")

header
  h1 3615 MyBlog
  div.innerGrid
      h1 3615 MyBlog
      span.subline Node.js is cool!
      span.admin
          i.fas.fa-cog
          |Administration

and the header.css

body{
    margin: 0;
}

header{
    width: 100vw;
    height: 100px;
}

.innerGrid{
    width: 90vw;
    height: 90%;
    display: grid;
    margin: auto;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 10px 40px 20px 20px auto;
    grid-template-areas:
            ". . ."
            "title . button"
            ". . ."
            "subline . ."
            ". . .";
}

.innerGrid h1{
    grid-area: title;
}

.innerGrid .subline{
    grid-area: subline;
}

.innerGrid .admin{
    grid-area: button;
}

.innerGrid {
  border: 1px solid black;
}

.innerGrid > * {
  border: 1px solid red;
}

And as you can see, the subline and button behave as expected, but the h1 outside of the grid has a size of 38.4px (on my computer), but the one in the grid has a size of 0px (and the cell in which it should be has a size of 40px, clearly superior to 38.4px).

edit : adding screenshot and borders in css to show the problem

screenshot to show the problem

Thank you for your help.

Solution

  • The problem most likely comes from the h1 having a default margin set by the browser, and therefore not behaving like your span which doesn't have any. It is common practice to reset the default margin and padding, see this link. In your case, you could also simply reset the margin for this specific element, like so:

    .innerGrid h1 {
    margin: 0;
}