Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: box model - horizontal rules

Horizontal margins and widths

The next HR should have a large left margin (m-l: 50%), but SHOULD NOT extend into the right margin.


The next HR should be short (m-r: 50%).


The next HR should be short and should be flush with the left of the page (50% w).


The next HR should be short and should be flush with the left of the page (50% w, m-l: 0).


The next HR should be short and should be flush with the left of the page (50% w, 50% m-r).


The next HR should be short and should be flush with the right of the page (50% w, m-l: 50%).


The next HR should be short and should not be flush with the right of the page (50% w, m-l: 20%).


The following two should look like normal (first is padding-left: 50%, the second padding-right: 50%) since padding has no effect on borders or backgrounds.



The following two should have big paddings. If the browser implements it as a border-top/bottom, this should act as a margin, but otherwise it should act to increase the height of the rule:



Since horizontal rules are applied as a border, if that border is not normally the same color as the text, this should not be blue (because although border-color's initial value is the value of color, if they are not normally the text color, there must be an HR {border-color} declaration in the UA style sheet, which will override the initial value):


But this should definitely be blue (border-color_:


Vertical margins

The next HR should have a big top margin.


The next HR should have a big bottom margin.


The next HR should have a big top padding, thereby increasing the transparent space between the borders.


The next HR should have a big bottom padding.


The following horizontal rule should not be visible (border: none):


The next HR should be huge and solid (border: solid 20px).


The next HR should be 10px (height: 10px):


The next HR should be 10px with a red background:


The next HR should not be right aligned, since text-align only applies to inline content, not to block elements such as HR: