How does {all: initial} work? Problem with default values

Question

Why does paragraph inherit properties from div such as: line-height and text-align.

If values for these properties are:

normal -> for line-height

[i.e. font-size = 16px (initial / default value) * normal (value is usually around 1.2 -> 19.2 px)]
start -> for text-align.

However, the initial values for these properties are overwritten/inherited from the div. Why? I don't understand this. At this point all: initial behaves like all: unset with the exception of font-size, which is not inherited from div.

div {
  width: 50%;
  font-size: 20px;
  line-height: 2;
  padding: 20px;
  text-align: justify;
  background-color: #11a683;
}
p {
  all: initial;
}

<div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum...
  </p>
</div>

Alohci · Answer 1 · 2022-06-29T00:04:46.117

Two slightly different reasons with a common cause.

Setting all:initial sets the p element to display:initial = display:inline.

text-align applies to block containers so it has no effect on the now inline p element at all.

line-height applies to inline boxes, but the value on the div adds a strut to each line box of 2 x the div's font-size hence spreading the lines out. The "normal" line-height on the p element is substantially less so it has no additional effect.

It's similar in resulting effect to changing the p element to a span element.

Your expected outcome can be achieved by restoring the p element to display:block.

div {
  width: 50%;
  font-size: 20px;
  line-height: 2;
  padding: 20px;
  text-align: justify;
  background-color: #11a683;
}
p {
  all: initial;
  display: block;
}

<div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum...
  </p>
</div>

How does {all: initial} work? Problem with default values

1 Answers1