8/4/13

CSS Margin
Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

Get Certified
Study Web Technologies and get a diploma at w3schools.com

SHARE THIS PAGE

Like

76k

CSS Basic
CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To

CSS Margin
Previous
The CSS margin properties define the space around elements.

WEB HOSTING

Next Chapter

Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

CSS Styling
Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables

Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. WEB BUILDING
XML Editor - Free Trial! FREE Website BUILDER FREE Website C reator Best Website Templates

Possible Values
Value auto length % inherit Description The browser calculates a margin Specifies a margin in px, pt, cm, etc. Default value is 0px Specifies a margin in percent of the width of the containing element Specifies that the margin should be inherited from the parent element

CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

STATISTICS
Browser Statistics OS Statistics Display Statistics

CSS Advanced
CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Summary

It is possible to use negative values, to overlap content.

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:

Example
m a r g i n t o p : 1 0 0 p x ; m a r g i n b o t t o m : 1 0 0 p x ; m a r g i n r i g h t : 5 0 p x ; m a r g i n l e f t : 5 0 p x ;
Try it yourself

Margin - Shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin":

CSS Examples
CSS Examples CSS Quiz CSS Certificate

Example
m a r g i n : 1 0 0 p x5 0 p x ;
Try it yourself The margin property can have from one to four values. margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px

CSS References
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

More Examples
w3schools.com/css/css_margin.asp 1/2

8/4/13

CSS Margin
Set the top margin of a text using a cm value This example demonstrates how to set the top margin of a text using a cm value. Set the bottom margin of a text using a percent value This example demonstrates how to set the bottom margin in percent, relative to the width of the containing element.

All CSS Margin Properties

Property margin margin-bottom margin-left margin-right margin-top Description A shorthand property for setting the margin properties in one declaration Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element

Previous

Next Chapter

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

w3schools.com/css/css_margin.asp

2/2