Shouldn’t `display:none` completely hide an element

7 views
0

In the following example from https://css-tricks.com/almanac/selectors/b/blank/, why is the paragraph box still visible even though its display is set to none using ::blank?

p {
  min-height: 30px;
  width: 250px;
  background-color: lightblue;
}
p:blank {
  display: none;
}
p:-moz-only-whitespace {
  display: none;
}
/* Mozilla-only pseudo-class that works like :blank will */
<div class="blanks">
  <p>This paragraph is not empty or blank.</p>
  <p>
    <!--this is empty and blank -->
  </p>
  <p>

    <!-- this is not empty, because it has whitespace. But it is blank.-->

  </p>
  <p>This paragraph is not empty or blank.</p>
</div>