Template:Horizontal rule

From MozillaWiki
(Redirected from Template:Hr)
Jump to: navigation, search

Documentation icon Template documentation[view] [edit] [history] [purge]

Usage

Shortcuts
{{hr}}

{{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).

HTML tag icon.png
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

Parameter Value type Value Comments
width Fallback inherit Value inherited from the parent element.
Number value + px/em a) e.g. 300px
e.g. 50em
Number value + % a) e.g. 80% Width in percent of the available space.
float Fallback none No float.
Float alignment left Float to the left-hand side of the page.
right Float to the right-hand side of the page.

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

1
4     2
3

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.

Grouping Example value Results
top/right/bottom/left 5px All four sides will have a margin of 5 px.
   top/bottom
+ right/left
5px 10px Top and bottom will have a margin of 5 px,
right and left sides a margin of 10 px.
   top
+ right/left
+ bottom
5px 10px 15px Top will have a margin of 5 px,
right and left sides a margin of 10 px,
bottom a margin of 15 px.
   top
+ right
+ bottom
+ left
5px 10px 15px 20px Top will have a margin of 5 px,
right side a margin of 10 px,
bottom a margin of 15 px,
left side a margin of 20 px.

Examples

Parameters What you type What you see Comments
No parameters {{hr}}
Outputs a standard horizontal rule
width width=200px}}
float width=200px|float=right}}
margin margin=50px}}
padding padding=10px}}