HTML & CSS FAQ

Contents

Preventing Parent–Child Margin Collapsing

Margin collapsing in a parent–child scenario can be prevented by setting the parent element’s display property to flow-root.

Using Spaces in CSS-generated Text

In general, spaces can be used in the content property. However, in order to make them appear, the property white-space has to be set to pre.

Non-breaking spaces can be specified by inserting the Unicode character NO-BREAK SPACE, which has the code point U+A0 and is written as \a0 in CSS:

ul.terms > li:not(:first-child)::before {
  content: '\a0& ';
  white-space: pre;
}

Using Text Glyphs Instead of Graphic Emojis

Web browsers such as Safari on iOS replace certain characters with graphic emojis. This may be appropriate for smileys, but for other symbols such as arrows the mostly colored images are often unsuitable. In order to instruct the web browser to select the text variant, the Unicode character must be followed by the character VARIATION SELECTOR-15 (variant selector text style), which has the code point U+FE0E. This is possible in CSS-generated text as well as directly in the HTML code:

<style>
a[href^='#']::after {
  content: '\a0↕\fe0e';
}
</style>

<p>The vertical double arrow ↕&#xFE0E; is a useful character.</p>

Creating an Expandable Table of Contents

The details element can be used to create a table of contents that can be displayed or hidden by the user. When the details element is expanded, the web browser adds the Boolean open attribute to the details element (<details open>):

<style>
nav.toc > details > summary {
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
}

nav.toc > details > summary::after {
  content: '\a0▼\fe0e';
}

nav.toc > details[open] > summary::after {
  content: '\a0▲\fe0e';
}

@media print {
  nav.toc > details {
    display: none;
  }
}
</style>

<nav class="toc">
  <details>
    <summary>Table of Contents</summary>
    <ol>
      <li><a href="#entry-1">Entry 1</a></li>
      <li><a href="#entry-2">Entry 2</a></li>
    </ol>
  </details>
</nav>