recursal/MDN huggingface dataset:
Stacking without the z-index property
=====================================

When the `z-index` property is not specified on any element, elements are stacked in the following order (from bottom to top):

1. The background and borders of the root element.
2. Descendant non-positioned elements, in order of appearance in the HTML.
3. Descendant positioned elements, in order of appearance in the HTML.

See types of positioning for an explanation of positioned and non-positioned elements.

Keep in mind, when the `order` property alters rendering from the *order of appearance in the HTML* within `flex` containers, it similarly affects the order for stacking context.

Example
-------

In this example, DIV #1 through DIV #4 are positioned elements. DIV #5 is static, and so is drawn below the other four elements, even though it comes later in the HTML markup.

### HTML


```html
<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>
```

### CSS


```css
strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

Result
------

See also
--------

* Stacking floating elements: How floating elements are handled with stacking.
* Using z-index: How to use `z-index` to change default stacking.
* Stacking context: Notes on the stacking context.
* Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
font-family
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
The **`font-family`** CSS descriptor sets the font family for a font specified in an `@font-face` at-rule.

 The value is used for name matching against a particular `@font-face` when styling elements using the `font-family` property.
 Any name may be used, and this overrides any name specified in the underlying font data.

Syntax
------


```css
/\* <string> values \*/
font-family: "font family";
font-family: "another font family";

/\* <custom-ident> value \*/
font-family: examplefont;
```

### Values

`<family-name>`

Specifies the name of the font family.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

font-family =   
  <family-name>    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

Examples
--------

### Setting the font family name


```css
@font-face {
  font-family: "Some font family";
  src: url("some\_font\_name.ttf");
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-display`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range`
descent-override
================

The **`descent-override`** CSS descriptor for the `@font-face` at-rule defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline formatting context.

Syntax
------


```css
descent-override: normal;
descent-override: 90%;
```

### Values

`normal`

The default value. When used the metric value is obtained from the font file.

`<percentage>`

A `<percentage>` value.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `normal` |
| Percentages | as specified |
| Computed value | as specified |

Formal syntax
-------------
```

descent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Examples
--------

### Overriding metrics of a fallback font

The `descent-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  descent-override: 125%;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ascent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
line-gap-override
=================

The **`line-gap-override`** CSS descriptor for the `@font-face` at-rule defines the line-gap metric for the font. The line-gap metric is the font recommended line-gap or external leading.

Syntax
------


```css
line-gap-override: normal;
line-gap-override: 90%;
```

### Values

`normal`

The default value. When used the metric value is obtained from the font file.

`<percentage>`

A `<percentage>` value.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `normal` |
| Percentages | as specified |
| Computed value | as specified |

Formal syntax
-------------
```

line-gap-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Examples
--------

### Overriding metrics of a fallback font

The `line-gap-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  line-gap-override: 125%;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
font-display
============

The **`font-display`** descriptor for the `@font-face` at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.

Syntax
------


```css
/\* Keyword values \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Values

`auto`

The font display strategy is defined by the user agent.

`block`

Gives the font face a short block period and an infinite swap period.

`swap`

Gives the font face an extremely small block period and an infinite swap period.

`fallback`

Gives the font face an extremely small block period and a short swap period.

`optional`

Gives the font face an extremely small block period and no swap period.



**Note:** In Firefox, the preferences `gfx.downloadable_fonts.fallback_delay`
 and `gfx.downloadable_fonts.fallback_delay_short` provide the duration
 of the "short" and "extremely small" periods, respectively.


Description
-----------

The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face:

* Font block period: If the font face is not loaded, any element attempting to use it must render an *invisible* fallback font face. If the font face successfully loads during this period, it is used normally.
* Font swap period: If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
* Font failure period: If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `auto` |
| Computed value | as specified |

Formal syntax
-------------
```

font-display =   
  auto      |  
  block     |  
  swap      |  
  fallback  |  
  optional    
  
```

Examples
--------

### Specifying fallback font-display


```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range`
ascent-override
===============

The **`ascent-override`** CSS descriptor for the `@font-face` at-rule defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.

Syntax
------


```css
ascent-override: normal;
ascent-override: 90%;
```

### Values

`normal`

The default value. When used the metric value is obtained from the font file.

`<percentage>`

A `<percentage>` value.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `normal` |
| Percentages | as specified |
| Computed value | as specified |

Formal syntax
-------------
```

ascent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Examples
--------

### Overriding metrics of a fallback font

The `ascent-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 125%;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
font-variation-settings
=======================

The **`font-variation-settings`** CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the `@font-face` at-rule. The values for this descriptor are the same as the `font-variation-settings` property, except for the global keyword values.

Since this descriptor sets variation values on the font object in the `@font-face` at-rule and not on an entire element, only some glyphs in an element may be rendered using this descriptor.

Syntax
------


```css
/\* Use the default settings \*/
font-variation-settings: normal;

/\* Set values for OpenType axis names \*/
font-variation-settings: "xhgt" 0.7;
```

### Values

`normal`

Text is laid out using default settings.

`<string> <number>`

When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a `<string>` of 4 ASCII characters, followed by a `<number>` indicating the axis value. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The `<number>` can be fractional or negative.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `normal` |
| Computed value | as specified |

Formal syntax
-------------
```

font-variation-settings =   
  normal                  |  
  [ <string> <number> ]#    
  
```

Examples
--------

### Setting font weight and stretch in a @font-face rule


```css
@font-face {
  font-family: "OpenTypeFont";
  src: url("open\_type\_font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-rend-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Other `@font-face` descriptors: `font-display`, `font-family`, `font-feature-settings`, `font-stretch`, `font-style`, `font-weight`, `src`, `unicode-range`
* Related font properties: `font-feature-settings`, `font-variation-settings`
unicode-range
=============

The **`unicode-range`** CSS descriptor sets the specific range of characters to be used from a font defined using the `@font-face` at-rule and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

Syntax
------


```css
/\* <unicode-range> values \*/
unicode-range: U+26; /\* single code point \*/
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /\* code point range \*/
unicode-range: U+4??; /\* wildcard range \*/
unicode-range: U+0025-00FF, U+4??; /\* multiple values \*/
```

### Values

***single code point***

A single Unicode character code point, for example `U+26`.

***code point range***

A range of Unicode code points. So for example, `U+0025-00FF` means *include all characters in the range `U+0025` to `U+00FF`*.

***wildcard range***

A range of Unicode code points containing wildcard characters, that is using the `'?'` character, so for example `U+4??` means *include all characters in the range `U+400` to `U+4FF`*.

Description
-----------

The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `U+0-10FFFF` |
| Computed value | as specified |

Formal syntax
-------------
```

unicode-range =   
  <urange>#    
  
```

Examples
--------

### Using a different font for a single character

In this example we create a simple HTML containing a single `<div>` element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, *Helvetica*, for the text, and a serif font, *Times New Roman*, for the ampersand.

In the CSS we are in effect defining a completely separate `@font-face` that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a `<span>` and applying a different font just to that, but that is an extra element and rule set.

#### HTML


```html
<div>Me & You = Us</div>
```


#### CSS


```css
@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # unicode-range-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-feature-settings`
* `font-variation-settings`
* `src`
size-adjust
===========

The **`size-adjust`** CSS descriptor for the `@font-face` at-rule defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

The `size-adjust` descriptor behaves in a similar fashion to the `font-size-adjust` property. It calculates an adjustment per font by matching ex heights.

Syntax
------


```css
size-adjust: 90%;
```

### Values

`<percentage>`

A `<percentage>` value with an initial value of 100%.

All metrics associated with this font are scaled by the given percentage. This includes glyph advances, baseline tables, and overrides provided by `@font-face` descriptors.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Initial value | `100%` |
| Percentages | as specified |
| Computed value | as specified |

Formal syntax
-------------
```

size-adjust =   
  <percentage [0,∞]>    
  
```

Examples
--------

### Overriding metrics of a fallback font

The `size-adjust` property can help when overriding the metrics of a fallback font to better match those of a primary web font.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  size-adjust: 90%;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 5 # size-adjust-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-display` descriptor
* `font-family` descriptor
* `font-weight` descriptor
* `font-style` descriptor
* `font-stretch` descriptor
* `font-feature-settings`
* `font-variation-settings` descriptor
* `src` descriptor
* `unicode-range` descriptor
* `font-size-adjust` property
Mastering margin collapsing
===========================

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as **margin collapsing**. Note that the margins of floating and absolutely positioned elements never collapse.

Margin collapsing occurs in three basic cases:

Adjacent siblings

The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).

No content separating parent and descendants

If there is no border, padding, inline part, block formatting context created, or *clearance* to separate the `margin-top` of a block from the `margin-top` of one or more of its descendant blocks; or no border, padding, inline content, `height`, or `min-height` to separate the `margin-bottom` of a block from the `margin-bottom` of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

Empty blocks

If there is no border, padding, inline content, `height`, or `min-height` to separate a block's `margin-top` from its `margin-bottom`, then its top and bottom margins collapse.

Some things to note:

* More complex margin collapsing (of more than two margins) occurs when the above cases are combined.
* These rules apply even to margins that are zero, so the margin of a descendant ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
* When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.
* When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.
* Collapsing margins is only relevant in the vertical direction.
* Margins don't collapse in a container with `display` set to `flex` or `grid`.
Examples
--------

### HTML


```html
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### Result

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements