Template:Horizontal rule/doc

This is a documentation subpage for Template:Horizontal rule.
It contains usage information, categories and other content that is not part of the original template page.

Usage

{{hr}} is a front-end for the HTML element <hr>, which represents a paragraph-level thematic break in a HTML document. It is displayed as a gray horizontal rule, which stretches across the entire width of the available space where it is added.

The primary function of this template is to let the user set the width of the rule, but it is also possible to manipulate its float, margins and padding (in the case of <hr> the CSS property padding adjusts the thickness of the rule).

Use HTML for a standard rule!
If no parameters are used, this template will output a standard horizontal rule in full width.
However, if that's all you want, it's easier to simply add the HTML code,  <hr> , directly.

Parameters

There are 4 parameters, which are all named and optional.

Syntax

The template's syntax is

• {{hr|width= |float= |margin= |padding= }}

Optional parameters

width

Width of the rule

You can define the width of the horizontal rule, either in pixels, em-units, or as a percentage of the available width.

Notes

• There are different ways to specify the value for the CSS property width. See the table under Available values below.
• If this parameter is used, but no value is specified, the template will fall back to the default value |width=inherit.

Usage

• {{hr|width=number value + px/em/%}}

float

Floating alignment

This parameter lets you change the float of the horizontal rule to either left or right.

Notes

• If the width of the rule isn't adjusted, this parameter is of no use.
• There are different ways to specify the value for the CSS property float. See the table under Available values below.
• If this parameter is used, but no value is specified, the template will fall back to the default value |float=none.

Usage

• {{hr|float=float value}}

margin

Margin of the rule

Use this parameter to define the margin size of the horizontal rule in pixels or em-units.

Notes

• This parameter uses the shorthand CSS property margin, which lets you specify the sub-properties margin-top, margin-right, margin-bottom and margin-left in one go.
• There are different ways to specify the value for the CSS property margin. See the table under Available values below.

Usage

• {{hr|margin=number value + px/em}}

padding

Thickness of the rule

With this parameter, you can specify the thickness of the horizontal rule in pixels or em-units.

Normally, the CSS property padding controls the padding inside a block element, i.e. the inside margin between the borders of the element, and, e.g. the text inside it. However, the horizontal rule is not like other block elements. It's easiest to think of it as a one-dimensional, solid object; a very wide block with almost no height at all.

Since it doesn't really have an inside to pad, the padding will instead simply expand the solid one-dimensional object from the center and outwards along the height axis, turning it into a solid two-dimensional object. The result is a gray rectangle. The space this rectangle occupies is "dead", i.e. it can't be directly edited.

Notes

• This parameter uses the shorthand CSS property padding, which lets you specify the sub-properties padding-top, padding-right, padding-bottom and padding-left in one go.
• There are different ways to specify the value for the CSS property padding. See the table under Available values below.

Usage

• {{hr|padding=number value + px/em}}

Available values

Width and float

^a) When using length or percentage, there can't be any space character between the number value and its unit (px or em for length, and % for percentage).

Margins and padding

As stated above, the two CSS properties margin and padding are shorthand properties. That means you define the values for all four sides of an element at the same time.

The order in which the four sides are defined in the code you write, is always the same: top, right, bottom, and left, as shown in the figure to the right. The actual specifying margins and padding can be done in four different ways, which are described in the table below.

Examples