| |
Padding
Padding specifies one or more interior margins or gutters of an element.
- It specifies the amount of space between the element content and its border.
- Possible values for padding properties are length and percentage.
length - It defines a fixed padding.
percentage - It defines padding in percentage with respect to the parent element's width.
- Negative values are not permitted.
- The default value for padding is zero.
A shorthand padding property can be used to change all of the paddings at once. Also, the padding property can be used to set different values for each edge of the element. For this purpose, more than one value for the property is to be used.
- One padding value defines the same amount of padding for each edge.
| Example |
h1 { padding : 20px;}
In this, the padding will be 20 pixels for all the four sides.
|
| |
When two padding values are specified, the first value specifies the padding of the top and bottom edges, the second specifies the padding of the left and right edges.
| Example |
p { padding : 10px 20 px;}
In this, the top and bottom padding will be 10 pixels, left and right padding will be 20 pixels.
|
| |
| Example |
p { padding : 15 px 10% 10 px;}
In this, the top padding will be 15 pixels, left and right padding will be 10% of the width of the parent element, bottom padding will be 10 pixels.
|
| |
-
When four padding values are specified, the four padding values specify the padding on top, left, bottom and right respectively.
| Example |
h1 { margin : 10 px 5% 15px 10%;}
In this, the top padding will be 10 pixels, right padding will be 5% of the parent element's width, bottom padding will be 15 pixels, and left margin will be 10% of the parent element's width.
|
| |
-
CSS padding properties can also be explicitly defined corresponding to each edge. Separate properties can be set for top, bottom, left, right margins. These are given below.
Padding-Bottom
This property sets the bottom padding of an element.
| Example |
p { padding-bottom: 15px;}
In this example, bottom padding is 15 pixels. |
|
| |
| |
Padding-Top
This property sets the top padding of an element.
| Example |
p { padding-top : 20%;}
In this example, top padding is 20% of the parent element's width. |
|
| |
Padding-Left
This property sets the left padding of an element.
| Example |
p { padding-left : 20px;}
In this example, left padding is 20 pixels. |
|
| |
| |
Padding-Right
This property sets the left padding of an element.
| Example |
p { padding-right : 20%;}
In this example, right padding is 20% of the parent element's width. |
|
| |
| |
| |
| Summary |
| |
In this chapter you have learnt:
- Setting space around an element using margin properties
- Setting different margin-property values for different edges
- Specifying interior gutter for an element
- Explicitly defining CSS padding properties corresponding to each edge
|
| |
| Review Question |
| |
Fill in the Blanks
- Margin is a space in the _____ of the element, where as padding is the space in the _____ of the element.
- Possible values for margin properties are _____, _____ and _____.
- The default value for margin is _____.
- With two padding values, the first value specifies the padding of the _____ and _____ edges , the second specifies the padding of the _____ and ______ edges.
- Possible values for padding properties are______ and _____.
Solutions
- Outside, inside
- Length, percentage, auto
- Zero
- Top, bottom, left and right Zero
State whether True or False
CSS margin properties lets you define the space inside elements.
- Both margin and padding properties can have negative values.
- margin:15px, will set top margin of an element to 15 pixels.
- The percentage value of padding properties defines the padding in percentage with respect to the parent element's height.
Solutions
- False
- True
- False
- False
|
| |
| What's Next |
The next chapter will acquaint you with the basic concepts of list-style. The chapter will further elucidate list-style- type, list-style-image and list-style position of the HTML list element.
Hop over to the next chapter to get list-style options close-up. |
| |
|
