Home / Questions / 97579
Accepted
lromeraj
Asked: 2020-08-27 07:36:51 +0800 CST 2020-08-27 07:36:51 +0800 CST

Why does adding the display: inline-block property to a label increase its margin?

  • 772

I have a <div>that contains a <label>, well, adding the CSS property display: inline-blockto <label>increases the margin or the margin paddingof it (I don't know why), here is the example:

document.addEventListener("DOMContentLoaded",function() {
  var label = document.getElementById("label");
  
  setTimeout(() => {
    label.style.display = 'inline-block';
    label.innerHTML += ', algo traviesa ;)';
  }, 2500);
});
* {
  padding: 0;
  margin: 0;
}

#cont {
  padding: 20px;
  background: #dedede;
}

#label {
  padding: 10px;
  background: #fff;
  color: #000;
}
<div id="cont">
  <label id="label">Soy una etiqueta</label>
</div>

css

1 Answers

  1. Best Answer

    This is because tags labelare inlinedefault elements, which means that these elements cannot have height or width and are expressly adjusted to the content of the element.

    Example:

    #label{
  background-color: red;
  width: 300px;
  height: 100px;
}
    <label id="label">Esto es una prueba</label>

    If you notice, both width ( width) and height ( height) are not applied to the tag label.

    The property paddinghas a bit of a curious effect with elements inline, since it only takes into account the left and right side but not the top and bottom when considering space with other elements.

    Example:

    #label{
  background-color: red;
  padding: 20px;
}
    <label id="label">Como puedes ver, el padding solo se aplica a izquierda y derecha</label><span>Si te fijas, el span solo respeta la parte posterior pero no la inferior del padding</span>

    As you can see in the example above, it only takes into account paddingboth to the left and to the right of the tag label, but not above or below it to position the rest of the elements.

    Therefore, why when we use the property inline-blockincreases padding?

    Actually it doesn't increase, but by setting an element as inline-blockit means that it behaves like an element inline(it can be with other elements on the same line, it adjusts to the content, etc...) but at the same time it takes into account the properties of the elements block(it takes into account properties such as height and width, paddingon all its sides, etc...).

    That is to say, the paddingdoes not really increase, but rather it is applied to all its sides and that is why it gives an effect that it is increasing when we add the property to it inline-block.

    Let's see the previous example but using inline-blockin the tag label:

    #label{
  display: inline-block;
  background-color: red;
  padding: 20px;
}
    <label id="label">Como puedes ver, el padding solo se aplica a izquierda y derecha</label><span>Si te fijas, el span solo respeta la parte posterior pero no la inferior del padding</span>

    As you can see in this last example, the paddingis applied to the element labeland the tag spanhonors the padding.

    • 2