CSS Padding, CSS Tutorial, Global Guideline

Forum | Blog


Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding.
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Padding.

     Back             Next     

The padding property in Cascading Style Sheets controls the distance between an elements border and an elements content.
The below CSS Tutorial section gives a graphical representation of the padding property

Syntax: padding: <value>
Possible Values: [ <length> | <percentage> ]{1,4}
Default Value: 0
Applies to: All elements
Inherited: No
Padding Property in Cascading Style Sheets

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

h1 {
	background: yellow;
	padding: 20px 20px 20px 80px;

h2 {
	background: orange;

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties in CSS.
An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.
If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.
For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em

     Back             Next     

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2022 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 303 visitors are online now