CSS: default styles of the figure element

CSS: default styles of the figure element

HTML5-capable browsers apply default CSS styles to the figure element.

Despite the fact that the W3C CSS specifications don't provide a default user-agent stylesheet for HTML5 elements yet, many HTML5-capable browsers assign default styles to the newly introduced HTML5 elements. This is the case of the figure element.

This element gets default styles which are much similar to the style rules applied to the blockquote element. In Webkit-based browsers you have the following rule:


figure {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

Other browsers like Firefox apply standard styles instead:


figure {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 40px;
	margin-right: 40px;
}

So if you want to normalize this element, you have to reset its margins:


figure {
	margin: 0;
}

You can see the test case here.