recursal/MDN huggingface dataset:
orphans
=======

The **`orphans`** CSS property sets the minimum number of lines in a block container that must be shown at the *bottom* of a page, region, or column.

In typography, an *orphan* is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)

Syntax
------


```css
/\* <integer> values \*/
orphans: 2;
orphans: 3;

/\* Global values \*/
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;
```

### Values

`<integer>`

The minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. The value must be positive.

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

|  |  |
| --- | --- |
| Initial value | `2` |
| Applies to | block container elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

orphans =   
  <integer [1,∞]>    
  
```

Examples
--------

### Setting a minimum orphan size of three lines

#### HTML


```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how orphans work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```


#### CSS


```css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

See also
--------

* `widows`
* Paged media
row-gap
=======

The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.

Early versions of the specification called this property `grid-row-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-row-gap` as an alias for `row-gap`.

Try it
------

Syntax
------


```css
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

/\* Global values \*/
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;
```

### Values

`<length-percentage>`

Is the width of the gutter separating the rows. `<percentage>` values are relative to the dimension of the element.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

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

row-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Flex layout

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### Result

### Grid layout

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 150px 1fr;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

See also
--------

* Related CSS properties: `column-gap`, `gap`
* Grid Layout Guide: *Basic concepts of grid layout - Gutters*
font-variant-position
=====================

The **`font-variant-position`** CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in `<sub>` and `<sup>` elements.

When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

Syntax
------


```css
/\* Keyword values \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/\* Global values \*/
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: revert-layer;
font-variant-position: unset;
```


The `font-variant-position` property is specified as one of the keyword values listed below.

### Values

`normal`

Deactivates alternate superscript and subscript glyphs.

`sub`

Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

`super`

Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

font-variant-position =   
  normal  |  
  sub     |  
  super     
  
```

Examples
--------

### Setting superscript and subscript forms

#### HTML


```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```


#### CSS


```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-position-prop |

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

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

See also
--------

* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
border-top
==========

The **`border-top`** shorthand CSS property sets all the properties of an element's top border.

Try it
------

As with all shorthand properties, `border-top` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:


```css
border-top-style: dotted;
border-top: thick green;
```


It is actually the same as this one:


```css
border-top-style: dotted;
border-top: none thick green;
```


The value of `border-top-style` given before `border-top` is ignored. Since the default value of `border-top-style` is `none`, not specifying the `border-style` part results in no border.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-top-color`
* `border-top-style`
* `border-top-width`
Syntax
------


```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

/\* Global values \*/
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: unset;
```


The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-top-width`.

`<br-style>`

See `border-top-style`.

`<color>`

See `border-top-color`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-top-style`: `none`
* `border-top-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-top-style`: as specified
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-top-color`: a color
* `border-top-style`: discrete
* `border-top-width`: a length
 |

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

border-top =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Applying a top border

#### HTML


```html
<div>This box has a border on the top side.</div>
```


#### CSS


```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### Results

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

See also
--------

* `border`
* `border-block`
* `outline`
border-spacing
==============

The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `<table>`. This property applies only when `border-collapse` is `separate`.

Try it
------

The `border-spacing` value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) `border-spacing` and the relevant (top, right, bottom, or left) `padding` on the table.

**Note:** The `border-spacing` property is equivalent to the deprecated `cellspacing` attribute of the `<table>` element, except that `border-spacing` has an optional second value that can be used to set different horizontal and vertical spacing.

Syntax
------


```css
/\* <length> \*/
border-spacing: 2px;

/\* horizontal <length> | vertical <length> \*/
border-spacing: 1cm 2em;

/\* Global values \*/
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;
```


The `border-spacing` property may be specified as either one or two values.

* When **one** `<length>` value is specified, it defines both the horizontal and vertical spacings between cells.
* When **two** `<length>` values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent *columns*), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent *rows*).
### Values

`<length>`

The size of the spacing as a fixed value.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | `table` and `inline-table` elements |
| Inherited | yes |
| Computed value | two absolute lengths |
| Animation type | discrete |

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

border-spacing =   
  <length>{1,2}    
  
```

Examples
--------

### Spacing and padding table cells

This example applies a spacing of `.5em` vertically and `1em` horizontally between a table's cells. Note how, along its outside edges, the table's `padding` values are added to its `border-spacing` values.

#### HTML


```html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
```


#### CSS


```css
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```


#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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

See also
--------

* `border-collapse`, `border-style`
* The `border-spacing` property alters the appearance of the `<table>` HTML element.
border-inline-color
===================

The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

The border color in the other dimension can be set with `border-block-color` which sets `border-block-start-color`, and `border-block-end-color`.

Syntax
------


```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;

/\* Global values \*/
border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: revert-layer;
border-inline-color: unset;
```

### Values

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | by computed value type |

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

border-inline-color =   
  <'border-top-color'>{1,2}    
  
```

Examples
--------

### Border color with vertical text

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}
```


#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-color |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
margin-inline
=============

The **`margin-inline`** CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `margin-inline-start`
* `margin-inline-end`
Syntax
------


```css
/\* <length> values \*/
margin-inline: 10px 20px; /\* An absolute length \*/
margin-inline: 1em 2em; /\* relative to the text size \*/
margin-inline: 5% 2%; /\* relative to the nearest block container's width \*/
margin-inline: 10px; /\* sets both start and end values \*/

/\* Keyword values \*/
margin-inline: auto;

/\* Global values \*/
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;
```


This property corresponds to the `margin-top` and `margin-bottom`, or the `margin-right` and `margin-left` properties, depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The `margin-inline` property may be specified using one or two values.

* When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.
### Values

The `margin-inline` property takes the same values as the `margin` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-inline-start`: `0`
* `margin-inline-end`: `0`
 |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | as each of the properties of the shorthand:* `margin-inline-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-inline-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

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

margin-inline =   
  <'margin-top'>{1,2}    
  
```

Examples
--------

### Setting inline start and end margins

#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```


#### HTML


```html
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-margin-inline |

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`
CSS generated content
=====================

The **CSS generated content** module defines how an element's content can be replaced and content can be added to a document with CSS.

Generated content can be used for content replacement, in which case the content of a DOM node is replaced with a CSS `<image>`. The CSS generated content also enables generating language-specific quotes, creating custom list item numbers and bullets, and visually adding content by generating content on select pseudo-elements as anonymous replaced elements.

### Generated content in action

The HTML for this sample is a single, empty `<div>` inside an otherwise empty `<body>`. The snowman was created with CSS images and CSS backgrounds and borders. The carrot nose was added using generated content: an empty box with a wide orange `left border` added to the `::before` pseudo-element. The text is also generated content: "only one <div>" was generated with the `content` property applied to the `::after` pseudo-element.

To see the code for this animation, view the source on GitHub.

Reference
---------

### Properties

* `content`
* `quotes`

**Note:** The CSS generated content module introduces four at-risk properties that have not been implemented: `string-set`, `bookmark-label`, `bookmark-level`, and `bookmark-state`.

### Functions

The CSS generated content module introduces six yet-to-be implemented CSS functions including `content()`, `string()`, and `leader()`, and the three `<target>` functions `target-counter()`, `target-counters()`, and `target-text()`.

### Data types

* `<content-list>`
* `<content-replacement>` (see `<image>`)
* `<image>`
* `<counter>`
* `<quote>`
* `<target>`
Guides
------

"How to" guide for generated content

Learn how to add text or image content to a document using the `content` property.

Create fancy boxes with generated content

Example of styling generated content for visual effects.

Related concepts
----------------

* CSS pseudo-elements module
    + `::before` pseudo-element
    + `::after` pseudo-element
    + `::marker` pseudo-element
* CSS lists and counters module
    + `counter()` function
    + `counters()` function
    + `counter-increment` property
    + `counter-reset` property
* CSS values and units module
    + `attr()` function
    + `<string>` data type
    + `<image>` data type
Specifications
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

See also
--------

* CSS pseudo-elements module
* CSS lists and counters module
* Replaced elements
:popover-open
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`:popover-open`** CSS pseudo-class represents a popover element (i.e. one with a `popover` attribute) that is in the showing state. You can use this to apply style to popover elements only when they are shown.

Syntax
------


```css
:popover-open {
  /\* ... \*/
}
```

Examples
--------

By default, popovers appear in the middle of the viewport. The default styling is achieved like this in the UA stylesheet:


```css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```


To override the default styles and get the popover to appear somewhere else on your viewport, you could need to override the above styles with something like this:


```css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-popover-open |

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

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

See also
--------

* Popover API
* `popover` HTML global attribute