Margin

From Frontal Wiki

Purpose

This convenience style sets the top, right, bottom and left margins for a visual element.

Value

The margin style accepts 1, 2, 3 or 4 values each of which may be a pixel value, a percentage value, a leftover percentage or "auto".

If one value is specified then the top, right, bottom and left margins are all set to this value.

If two values are specified then the top and bottom margins are set to the first value and the left and right margins are set to the second value.

If three values are specified then the top margin is set to the first value, the left and right margins are set to the second value and the bottom margin is set to the third value.

If four values are specified then the top margin is set to the first value, the left margin is set to the second value, the bottom margin is set to the third value and the right margin is set to the fourth value.

The default value is 0.

margin: 10px 10% 15px 15%;

Remarks

See the Frontal's Layout Scheme for a discussion on how margins affect the layout of a visual element particularly with respect to padding and borders.

Example

This example shows an 'img' tag with margins, padding and a border.

<style><![CDATA[
	img
		{
			margin: 10px 20px 30px 40px;
			width: 100% leftover;
			height: 100% leftover;
			border-color: red;
			border-width: 10px;
			padding: 10px;
			background-color: skyblue;
			resize-scale: showmost;
			resize-scale-origin: center middle;
			overflow: hidden;
		}
]]></style>
<img src="http://www.frontalcode.com/assets/images/image_11.jpg" />

Can Be Applied To

This style can be applied to any visual element:

• document
• div
• img
• text
• video
• form
• input