Bardelman Bardelman - 28 days ago 11
CSS Question

Why CSS padding is inherited from ul to il

In a code example an

ul
's padding was set to 0

nav ul {
list-style:none;
margin: 0;
padding: 0;
}


and all the ul items and sub-items had their padding set to 0 too as it was inherited from the ul and that was strange for me because the padding property doesn't have inheritance so why this happens ?

enter image description here

Answer

It doesn't happen. Blame Chrome's devtools.

ul {
  border: 1px solid blue;
  padding-left: 100px;
}
li {
  border: 1px solid red;
  /* Does not inherit padding */
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
</ul>