Home > CSS > Margins and Padding Propertiesprinter version

Margins and Padding Properties

CSS margins are the amount of space between an element and the elements that surround it. Padding is the amount of space between the content and the border of an element.

Units of Measurement

Units of measurement, when applied to margins and padding, may either be relative or absolute. Absolute units have no real meaning on a computer screen so are not covered here. Relative units include ...

em, en and ex are units historically based on metal type. In style sheets they act as multiples of a default size e.g. If the default size were 10 pixels then 2em would be 20px.
px is straightforwardly a size in pixels which will show as a different physical size on different screen resolutions.

Example of Setting the Margins and Padding Properties of a Class

.element_class_name {
margin: 8px;
padding: 4px;
}

Property	Description	Values
margin	Sets the size of all margins around the element. If length is used it must be set to units of measurement.	auto length percentage
margin−top	Sets the size of the top margin of the element. If length is used it must be set to units of measurement.	auto length percentage
margin−right	Sets the size of the right margin of the element. If length is used it must be set to units of measurement.	auto length percentage
margin−bottom	Sets the size of the bottom margin of the element. If length is used it must be set to units of measurement.	auto length percentage
margin−left	Sets the size of the left margin of the element. If length is used it must be set to units of measurement.	auto length percentage
padding	Sets the size of all padding within the element. If length is used it must be set to units of measurement.	auto length percentage
padding−top	Sets the size of the top padding within the element. If length is used it must be set to units of measurement.	auto length percentage
padding−right	Sets the size of the right padding within the element. If length is used it must be set to units of measurement.	auto length percentage
padding−bottom	Sets the size of the bottom padding within the element. If length is used it must be set to units of measurement.	auto length percentage
padding−left	Sets the size of the left padding within the element. If length is used it must be set to units of measurement.	auto length percentage

Previous - Border Properties Next - Size and Position

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP