CSS3 Examples

CSS MARGIN-LEFT

Written by jon on 11:38 PM This property controls the size of the left margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.
Collapsing margins: adjoining horizontal margins between elements should not collapse.

Example

h5 { margin-left: 1.0cm } <h5 style=”margin-legt: 3.0in”>This is some text</h5>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto This value specifies that a value determined by the browser be used for this property. [length] Refers to either an absolute measurement or a relative measurement based on the current element's font size. [percentage] Refers to a percentage of the width of the current element's containing block.

CSS MARGIN-BOTTOM

Written by jon on 11:36 PM This property controls the size of the bottom margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.
Collapsing margins: adjoining vertical margins between regular-flow elements may collapse; The larger of adjacent margin values is used. If the adjacent margins are all negative, the larger of the negative values is used. If positive and negative vertical margins are adjacent, the value should be collapsed thus: the largest of the negative margin values should be subtracted from the largest positive margin value.

Example

blockquote { margin-bottom: 3.0in }<blockquote style=”margin-bottom: 3.0in”>This is some text</blockquote>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto This value specifies that a value determined by the browser be used for this property. [length] Refers to either an absolute measurement or a relative measurement based on the current element's font size. [percentage] Refers to a percentage of the width of the current element's containing block.

CSS MARGIN-RIGHT

Written by jon on 11:34 PM This property controls the size of the right margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.
Collapsing margins: adjoining horizontal margins between elements should not collapse.

Example

h1 { margin-right: auto } <h1 style=”margin-right: auto”>This is some text</h1>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto This value specifies that a value determined by the browser be used for this property. [length] Refers to either an absolute measurement or a relative measurement based on the current element's font size. [percentage] Refers to a percentage of the width of the current element's containing block.

CSS MARGIN-TOP

Written by jon on 11:31 PM This property controls the size of the top margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.
Collapsing margins: adjoining vertical margins between regular-flow elements may collapse; The larger of adjacent margin values is used. If the adjacent margins are all negative, the larger of the negative values is used. If positive and negative vertical margins are adjacent, the value should be collapsed thus: the largest of the negative margin values should be subtracted from the largest positive margin value.

Example

address { margin-top: 33% } <address style=”margin-top: 33%”>This is a test</address>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto This value specifies that a value determined by the browser be used for this property. [length] Refers to either an absolute measurement or a relative measurement based on the current element's font size. [percentage] Refers to a percentage of the width of the current element's containing block.

CSS MARGIN

Written by jon on 7:10 AM This is a shorthand property which allows an author to specify ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.
CSS margins are transparent and the background value of the parent element shines through. Negative values are allowed for each margin value of this property, which opens the way for text overlays to be created.

Example

body { margin: 5px 0px 2px 25px } <body style=”margin: 5px 0px 2px 25px”>this is some text</body>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto This value specifies that a value determined by the browser be used for this property. [length] Refers to either an absolute measurement or a relative measurement based on the current element's font size. [percentage] Refers to a percentage of the width of the current element's containing block.