Why are my inline divs at different heights?

Question

I am using a grid container on an html page; inside two adjacent divs in the grid I have some little divs. I want these little divs to appear at the same height so they are aligned across the page. I think that I've given them the same relevant properties, but they are sitting at slightly different heights, and the line spacing is different. Why this is happening and how to remedy it?

Relevant info: I'm looking at my HTML in Chrome.

Image of my uneven blocks: image of divs at uneven heights

Relevant code: The container is defined in CSS like this:

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}

The two columns of the container where the problem arises are columns 3 and 4 (2fr and 4fr columns). Those divs are defined as:

 .wordDisplay {
  padding-top: 100px;
  text-align: center;
}

.display {
  padding-top: 100px;
}

And the little blue-box divs that I want to appear at the same height are:

.a {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.a:hover {
  background-color: yellow !important;
}

.b {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.b:hover {
  background-color: yellow;
}

Answer 1

Remove margins to get full height, The problem is, you're using margin for the wrong purpose margin has different behavior, you have to be careful while using it. Ask yourself why I want to use it here. Your use of it as a value does not mean the expected result because it depends on your code scenario. I recommend you to read this article

to ensure that you understand margins clearly, you will know what issue is happened it's something dirty call margin collapse there are two fixes I will recommend for your situation:

1. If your HTML like that:

       <div class="container">
      <div class="wordDisplay">
         <div class="b">
            band
         </div>
         <div class="b">
            band
         </div>
      </div>
      <div class="display">
         <div class="a">
            b
         </div>
         <div class="a">
            a
         </div>
         <div class="a">
            n
         </div>
         <div class="a">
            d
         </div>
         <div class="a">
            b
         </div>
         <div class="a">
            a
         </div>
         <div class="a">
            n
         </div>
         <div class="a">
            d
         </div>
      </div>
   </div>
   

Change margin for class "a" to half of margin in class "b" so if you add margin:1% in class "b" change the value of margin in class "a" to 0.5% so that will solve your problem.

2. Change grid template columns for column 3 and 4 to two equals fractions like that

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}