Padding properties specify the width of the padding area of a box. The 'padding'
shorthand property sets the padding for all four sides while the other padding properties only set their respective side.

<padding-width> | inherit

padding-bottom

padding-right

padding-left

padding

border-top-width

The border properties specify the width, color, and style of the border area of a box.
These properties apply to all elements.Note. Notably for HTML, user agents may render borders for certain user interface elements
(e.g., buttons, menus, etc.) differently than for "ordinary" elements.

inline-block - this value causes an element to generate a block box,
which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the
element itself is formatted as an inline replaced element

CSS fragment: em { display: inline-block }

First element block block

Second block

HTML fragment:
<p>First <em>element</em> box</p>
<p>Second box</p>

inline - this value causes an element to generate one or more inline boxes

CSS fragment: p { display: inline }

First

Second

HTML fragment:
<p>First</p>
<p>Second</p>

list-item - this value causes an element (e.g., LI in HTML) to generate
a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists.

CSS fragment: span { display: list-item }

FirstSecond

HTML fragment:
<span>First</span> <span>Second</span>

none - this value causes an element to generate no boxes
in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either;
this behavior cannot be overridden by setting the 'display' property on the descendants

CSS fragment: h3 { display: none }

First (hidden)

Second

HTML fragment:
<h3>First (hidden)</h3>
<p>Second</p>

run-in - this value creates either block or inline boxes, depending on context.
Properties apply to run-in boxes based on their final status (inline-level or block-level).

relative - the box's position is calculated according to the normal flow
(this is called the position in normal flow). Then the box is offset relative to its normal position.
When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell,
and table-caption elements is undefined.

absolute - the box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block.
Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings.
Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed - the box's position is calculated according to the 'absolute' model,
but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins.
In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn't move when scrolled.
In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through
a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in
a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page.

This property specifies whether a box should float to the left, right, or not at all.
It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

Indicates which sides of an element's box(es) may not be adjacent to an
earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

none | left | right | both | inherit

left - the clearance of the generated box is set to the amount necessary to place
the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

p { clear: left }

right - the clearance of the generated box is set to the amount necessary to place
the top border edge below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

img { clear: right }

both - the clearance of the generated box is set to the amount necessary to place
the top border edge below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

div { clear: both }

none - no constraint on the box's position with respect to floats.

em { clear: none }

z-index

'z-index' property specifies the stack level of the box in the current stacking context
and whether the box establishes a local stacking context.

I didn't like the play, but then I saw it under adverse conditions - the curtain was up.

- Groucho Marx

scroll - indicates that the content is clipped and that if the user agent
uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or
not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.
When this value is specified and the target medium is 'print', overflowing content may be printed.

I didn't like the play, but then I saw it under adverse conditions - the curtain was up.

- Groucho Marx

clip

Applies only to absolutely positioned elements

<shape> | auto | inherit

p { clip: rect(5px, 40px, 45px, 5px); }

In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>)
where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box
in left-to-right text and from the right border edge of the box in right-to-left text.

p { clip: rect(5px, 55px, 45px, 5px); }

visibility

The 'visibility' property specifies whether the boxes generated by an element are rendered.
Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).

hidden - the generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible
if they have 'visibility: visible'.

collapse - please consult the section on dynamic row and column effects in tables. If used on elements other than rows, row groups, columns, or column groups,
'collapse' has the same meaning as 'hidden'.

The 'font' property is, except as described below, a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size',
'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical
shorthand notation to set multiple properties related to fonts.

embed - if the element is inline-level, this value opens
an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the
'direction' property. Inside the element, reordering is done implicitly.

bidi-override - for inline-level elements this creates an override.
For block-level, table-cell, table-caption, or inline-block elements this creates an override for inline-level descendents not within another block-level,
table-cell, table-caption, or inline-block element. This means that inside the element, reordering is strictly in sequence according to the 'direction' property;
the implicit part of the bidirectional algorithm is ignored.

normal - computes to 'none' for the :before and :after pseudo-elements.

li:before { content: normal }

<string> - text content (see the section on strings).

CSS fragment:
span:before { content: "Chapter: "; }

this is a chapter

HTML fragment:
<span>this is a chapter</span>

<uri> - the value is a URI that designates
an external resource (such as an image). If a user agent cannot display the resource it must ignore it.

CSS fragment:

HTML fragment:

<counter> - counters may be specified with two different functions: 'counter()'
or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'.
The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style
('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'.

CSS fragment:

HTML fragment:

open-quote and close-quote - these values are replaced by the appropriate string
from the 'quotes' property.

attr(X) - this function returns as a string the value of attribute X for
the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn't have an attribute X, an empty string is returned.
The case-sensitivity of attribute names depends on the document language.

CSS fragment:

HTML fragment:

quotes

This property specifies quotation marks for any number of embedded quotations.

[<string> <string>]+ | none | inherit

q:lang(en) { quotes: '"' '"' "'" "'" }

none - the 'open-quote' and 'close-quote' values of the 'content' property
produce no quotation marks.

CSS fragment:
q:lang(no) { quotes: "«" "»" '"' '"' }

Trøndere gråter når Vinsjan på kaia blir deklamert.

[<string> <string>]+ - values for the 'open-quote' and 'close-quote' values
of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost
level of quotation, the second pair the first level of embedding, etc.

Accepts one or more names of counters (identifiers), each one optionally followed by an integer.
The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1.
Zero and negative integers are allowed

First chapter

First section

Second section

Second chapter

First section

Second section

counter-reset

contains a list of one or more names of counters, each one optionally followed by an integer.
The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

Specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image
pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems,
and alphabetic systems.