CODEWITHSUNDEEP
htmlcss
Revious
Revious

Reputation: 8146

Where does this space comes from? CSS

I've been playing both with Chrome and Firefox Dev Tools, changing the display mode, changing the height, the line height, checking padding and margin but I cannot understand where does that space come from. Where do that 16 pixels come from and why the tool doesn't show its origin?

https://jsfiddle.net/Revious/216xt0u8/1/

The real page: https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b1-tiamina/

enter image description here

div.my_shortcode_list {
  column-count: 2;
  margin-bottom: 4px;
}

.entry-content table.my_shortcode_list tr:hover td,
.entry-content table.my_shortcode_list:hover {
  background-color: white !important;
}

.entry-content table.my_shortcode_list tr td {
  padding: 0;
}

ul.my_shortcode_list {
  margin: 0px;
  list-style: none;
}

ul.my_shortcode_list li {
  line-height: 0;
  margin-bottom: 1px;
}

.list li {
  background: url("https://bradfrost.github.com/this-is-responsive/patterns/images/icon_arrow_right.png") no-repeat 97% 50%;
  border-bottom: 1px solid #ccc;
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.inner {
  display: table-row;
  overflow: hidden;
}

.li-img {
  display: table-cell;
  vertical-align: middle;
  /*width: 30%;*/
  padding-right: 2px;
}

.li-img img {
  display: block;
  max-width: 50px;
  height: 50px;
  width: 50px;
}

@media screen and (max-width: 600px) {
  div.li-img img {
    max-width: 50px;
    height: 50px;
    width: 50px;
  }
}

.li-text {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
  /*width: 70%;*/
}

ol.nicelist,
ul.nicelist {
  /* counter-reset: li; */
  /* list-style: none; */
  /* padding: 0; */
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
  margin: 1.2em 0 1.2em 1em;
}

ol.nicelist li,
ul.nicelist li {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .6em 0;
  background: #EFEFEF;
  text-decoration: none;
  border-radius: .3em;
  font-size: 0.94em;
}

ol.nicelist li:before,
ul.nicelist li:before {
  content: " ";
  position: absolute;
  left: -13px;
  top: 20px;
  margin-top: -17px;
  background: #4db2ec;
  height: 28px;
  width: 28px;
  line-height: 26px;
  border: 4px solid #fff;
  text-align: center;
  font-weight: 700;
  border-radius: 28px;
  transition: all .3s ease-out;
  color: #555;
  font-size: 14px;
}
<div class="nicelist" id="DIV_1">
  <h3 id="H3_2"><span id="SPAN_3">Lista delle principali vitamine</span></h3>
  <ul class="nicelist" id="UL_4">
    <li id="LI_5">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamine-del-gruppo-b/" id="A_6">
        <div class="li-img" id="DIV_7">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamine-del-gruppo-b-150x150.jpg" alt="Vitamine del gruppo B" class="td-animation-stack-type0-2" id="IMG_8">
        </div>
        <div class="li-text" id="DIV_9">Vitamine del gruppo B </div>
      </a>
    </li>
    <li id="LI_10">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b5/" id="A_11">
        <div class="li-img" id="DIV_12">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b5-150x150.jpg" alt="Vitamina B5" class="td-animation-stack-type0-2" id="IMG_13">
        </div>
        <div class="li-text" id="DIV_14">Vitamina B5 </div>
      </a>
    </li>
    <li id="LI_15">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/piridossina-vitamina-b6/" id="A_16">
        <div class="li-img" id="DIV_17">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b6-150x150.jpg" alt="Vitamina B6" class="td-animation-stack-type0-2" id="IMG_18">
        </div>
        <div class="li-text" id="DIV_19">Vitamina B6 </div>
      </a>
    </li>
    <li id="LI_20">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b8/" id="A_21">
        <div class="li-img" id="DIV_22">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b8-150x150.jpg" alt="Vitamina B8" class="td-animation-stack-type0-2" id="IMG_23">
        </div>
        <div class="li-text" id="DIV_24">Vitamina B8 </div>
      </a>
    </li>
    <li id="LI_25">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b12/" id="A_26">
        <div class="li-img" id="DIV_27">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b12-alta-bassa-funzioni-150x150.jpg" alt="Vitamina B12" class="td-animation-stack-type0-2" id="IMG_28">
        </div>
        <div class="li-text" id="DIV_29">Vitamina B12 </div>
      </a>
    </li>
    <li id="LI_30">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/acido-folico-tutto-quello-che-dovete-sapere/" id="A_31">
        <div class="li-img" id="DIV_32">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/06/acido-folico-150x150.jpg" alt="Acido Folico" class="td-animation-stack-type0-2" id="IMG_33">
        </div>
        <div class="li-text" id="DIV_34">Acido Folico </div>
      </a>
    </li>
    <li id="LI_35">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-d/" id="A_36">
        <div class="li-img" id="DIV_37">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/08/vitamina-d-150x150.jpg" alt="Vitamina D" class="td-animation-stack-type0-2" id="IMG_38">
        </div>
        <div class="li-text" id="DIV_39">Vitamina D </div>
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 181

Answers (3)

Jason Is My Name
Jason Is My Name

Reputation: 939

If you look at the styles of your li's:

ol.nicelist li, ul.nicelist li {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .6em 0;
    background: #EFEFEF;
    text-decoration: none;
    border-radius: .3em;
    font-size: 0.94em;
}

You can see there is a margin applied of .6em 0;

This is what creates the gap between the list items.

As for the anchor you have highlighted you need to set this to be display block so it takes into account the contents when creating the size measured in the DOM.

Upvotes: 1

andyb
andyb

Reputation: 43823

I do not yet know why, but the space is where the text will naturally be rendered without display: table-cell on the .li-img and .li-text.

It could be because a set of anonymous boxes will be automatically rendered around the cell but I do not have any hard evidence this is the cause.

Replacing display: table-cell with display: inline-block on .li-img and .li-text, removing the margin-bottom: 21px from the <img> and adding display: inline-block on the <a> removes the phantom space and shows the children correctly contained by the <a> in the Chrome DevTools.

Upvotes: 3

Johannes
Johannes

Reputation: 67768

It's the line-height of the link element. You can set it to zero by adding line-height: 0 to the rule for the li elements which are addressed by ol.nicelist li, ul.nicelist li.

div.my_shortcode_list {
  column-count: 2;
  margin-bottom: 4px;
}

.entry-content table.my_shortcode_list tr:hover td,
.entry-content table.my_shortcode_list:hover {
  background-color: white !important;
}

.entry-content table.my_shortcode_list tr td {
  padding: 0;
}

ul.my_shortcode_list {
  margin: 0px;
  list-style: none;
}

ul.my_shortcode_list li {
  line-height: 0;
  margin-bottom: 1px;
}

.list li {
  background: url("https://bradfrost.github.com/this-is-responsive/patterns/images/icon_arrow_right.png") no-repeat 97% 50%;
  border-bottom: 1px solid #ccc;
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.inner {
  display: table-row;
  overflow: hidden;
}

.li-img {
  display: table-cell;
  vertical-align: middle;
  /*width: 30%;*/
  padding-right: 2px;
}

.li-img img {
  display: block;
  max-width: 50px;
  height: 50px;
  width: 50px;
}

@media screen and (max-width: 600px) {
  div.li-img img {
    max-width: 50px;
    height: 50px;
    width: 50px;
  }
}

.li-text {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
  /*width: 70%;*/
}

ol.nicelist,
ul.nicelist {
  /* counter-reset: li; */
  /* list-style: none; */
  /* padding: 0; */
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
  margin: 1.2em 0 1.2em 1em;
}

ol.nicelist li,
ul.nicelist li {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .6em 0;
  background: #EFEFEF;
  text-decoration: none;
  border-radius: .3em;
  font-size: 0.94em;
  line-height: 0;
}

ol.nicelist li:before,
ul.nicelist li:before {
  content: " ";
  position: absolute;
  left: -13px;
  top: 20px;
  margin-top: -17px;
  background: #4db2ec;
  height: 28px;
  width: 28px;
  line-height: 26px;
  border: 4px solid #fff;
  text-align: center;
  font-weight: 700;
  border-radius: 28px;
  transition: all .3s ease-out;
  color: #555;
  font-size: 14px;
}
<div class="nicelist" id="DIV_1">
  <h3 id="H3_2"><span id="SPAN_3">Lista delle principali vitamine</span></h3>
  <ul class="nicelist" id="UL_4">
    <li id="LI_5">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamine-del-gruppo-b/" id="A_6">
        <div class="li-img" id="DIV_7">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamine-del-gruppo-b-150x150.jpg" alt="Vitamine del gruppo B" class="td-animation-stack-type0-2" id="IMG_8">
        </div>
        <div class="li-text" id="DIV_9">Vitamine del gruppo B </div>
      </a>
    </li>
    <li id="LI_10">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b5/" id="A_11">
        <div class="li-img" id="DIV_12">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b5-150x150.jpg" alt="Vitamina B5" class="td-animation-stack-type0-2" id="IMG_13">
        </div>
        <div class="li-text" id="DIV_14">Vitamina B5 </div>
      </a>
    </li>
    <li id="LI_15">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/piridossina-vitamina-b6/" id="A_16">
        <div class="li-img" id="DIV_17">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b6-150x150.jpg" alt="Vitamina B6" class="td-animation-stack-type0-2" id="IMG_18">
        </div>
        <div class="li-text" id="DIV_19">Vitamina B6 </div>
      </a>
    </li>
    <li id="LI_20">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b8/" id="A_21">
        <div class="li-img" id="DIV_22">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b8-150x150.jpg" alt="Vitamina B8" class="td-animation-stack-type0-2" id="IMG_23">
        </div>
        <div class="li-text" id="DIV_24">Vitamina B8 </div>
      </a>
    </li>
    <li id="LI_25">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-b12/" id="A_26">
        <div class="li-img" id="DIV_27">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/09/vitamina-b12-alta-bassa-funzioni-150x150.jpg" alt="Vitamina B12" class="td-animation-stack-type0-2" id="IMG_28">
        </div>
        <div class="li-text" id="DIV_29">Vitamina B12 </div>
      </a>
    </li>
    <li id="LI_30">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/acido-folico-tutto-quello-che-dovete-sapere/" id="A_31">
        <div class="li-img" id="DIV_32">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/06/acido-folico-150x150.jpg" alt="Acido Folico" class="td-animation-stack-type0-2" id="IMG_33">
        </div>
        <div class="li-text" id="DIV_34">Acido Folico </div>
      </a>
    </li>
    <li id="LI_35">
      <a href="https://wordpress-217146-992662.cloudwaysapps.com/vitamina-d/" id="A_36">
        <div class="li-img" id="DIV_37">
          <img src="https://wordpress-217146-992662.cloudwaysapps.com/wp-content/uploads/2019/08/vitamina-d-150x150.jpg" alt="Vitamina D" class="td-animation-stack-type0-2" id="IMG_38">
        </div>
        <div class="li-text" id="DIV_39">Vitamina D </div>
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions