Css boxes misalignment caused by inner span?

Question

I created a set of color boxes, though their alignment is destroyed when some of them have an inner span and others no. Do note: The inner span contain text which has font:0/0 a; property. Hence i am struggling to understand why this happens.

The code can be found here:

.cf_filters_list {
    padding-inline-start: 0;
    margin-inline-start: 0;
}

.cf_colorbtn_list li {
    display: inline-block;
    padding: 0px !important;
    position: relative;
}

cf_filters_list li .cf_option {
    text-decoration: none;
    padding: 1px 5px;
}
.cf_color_btn {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
    padding: 0px !important;
    border: 1px solid #999;
    margin: 2px 4px 4px 2px !important;
}

.cf_hidden_text {
    font: 0/0 a;
    color: transparent !important;
}

.cf_color_inner {
    height: 1.8em;
    display: inline-block;
    float: left;
    margin: 0px !important;
    padding: 0px !important;
}

<ul class="cf_filters_list cf_colorbtn_list">
  <li class="cf_filters_list_li">
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlA" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_hidden_text">Color A</span>
        <span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li" >
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlB" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li">
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlC" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_hidden_text">Color C</span>
       <span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>
</ul>

Check what happens to the 2nd box that misses the <span class="cf_hidden_text">Text</span> or to the rest when we add that span to the 2nd box.

Answer 1

Use display:flex on your cf_filters_list - Flex boxes are easy and are rec emended to use.

Read more about it here flex here:

MDN flex information here

.cf_filters_list {
  padding-inline-start: 0;
  margin-inline-start: 0;
  display: flex;
}

.cf_colorbtn_list li {
  display: inline-block;
  padding: 0px !important;
  position: relative;
}

cf_filters_list li .cf_option {
  text-decoration: none;
  padding: 1px 5px;
}

.cf_color_btn {
  display: inline-block;
  width: 2em;
  box-sizing: border-box;
  padding: 0px !important;
  border: 1px solid #999;
  margin: 2px 4px 4px 2px !important;
}

.cf_hidden_text {
  font: 0/0 a;
  color: transparent !important;
}

.cf_color_inner {
  height: 1.8em;
  display: inline-block;
  float: left;
  margin: 0px !important;
  padding: 0px !important;
}

<ul class="cf_filters_list cf_colorbtn_list">
  <li class="cf_filters_list_li">
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlA" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_hidden_text">Color A</span>
        <span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li">
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlB" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li">
    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlC" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">
        <span class="cf_hidden_text">Color C</span>
        <span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>
</ul>

Answer 2

Add vertical-align: top; on .cf_colorbtn_list li

.cf_filters_list {
    padding-inline-start: 0;
    margin-inline-start: 0;
}

.cf_colorbtn_list li {
    display: inline-block;
    padding: 0px !important;
    position: relative;
   vertical-align: top;
}

cf_filters_list li .cf_option {
    text-decoration: none;
    padding: 1px 5px;
}
.cf_color_btn {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
    padding: 0px !important;
    border: 1px solid #999;
    margin: 2px 4px 4px 2px !important;
}

.cf_hidden_text {
    font: 0/0 a;
    color: transparent !important;
}

.cf_color_inner {
    height: 1.8em;
    display: inline-block;
    float: left;
    margin: 0px !important;
    padding: 0px !important;
}

<ul class="cf_filters_list cf_colorbtn_list">

  <li class="cf_filters_list_li">

    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlA" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">

        <span class="cf_hidden_text">Color A</span>

        <span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li" >

    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlB" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">        

        <span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li class="cf_filters_list_li">

    <div class="cf_link" role="button" aria-pressed="false">
      <a href="someurlC" class="cf_option cf_color_btn  " data-module-id="110" rel="nofollow">

        <span class="cf_hidden_text">Multi-Red</span>

       <span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
      </a>
    </div>
  </li>
</ul>