Kevin Powell - Community•3y ago

empty pseudo. doubt regarding padding inherit

I'm testing with the :empty pseudo and tried giving it padding: inherit, it works the same as padding: 0. where is this padding being inherited from? I'm not using any resets https://codepen.io/kaedaDante/pen/BaxwMjx

Kaeda Dante

CodePen

BaxwMjx

...

5 Replies

Unknown User•3y ago

Message Not Public

MarkBoots•3y ago

in this case div.error:empty inherit looks at it's parent div. That doesnt have a padding set, so it will default to zero

<div> /*has no padding set */
  <div class="error"></div> /*empty, inherit looks at parent div */
</div>

<div> /*has no padding set */
  <div class="error"></div> /*empty, inherit looks at parent div */
</div>

Instead of removing the padding from an empty error, you could just only style the .error when it is :not(:empty)

.error:not(:empty) {
  background: tomato;
  padding: 0.5em 0.75em;
}

.error:not(:empty) {
  background: tomato;
  padding: 0.5em 0.75em;
}

∂αηтєOP•3y ago

although i haven't set explicitly set a padding, there is a default padding/margin right? or will it only inherit if i set a padding/margin by myself?

MarkBoots•3y ago

no, divs have no default paddings/margins

∂αηтєOP•3y ago

oh, in that case, this makes sense thanks for this!

Gaming

Programming

empty pseudo. doubt regarding padding inherit