Padding Properties
CSS padding properties control the space inside an element, between its content and border. Padding ensures proper spacing for readability and design aesthetics.
| Property | Possible Values | Description |
|---|---|---|
padding | px, em, %, auto | Shorthand for setting all four padding sides |
padding-top | px, em, %, auto | Space above the content |
padding-right | px, em, %, auto | Space to the right of the content |
padding-bottom | px, em, %, auto | Space below the content |
padding-left | px, em, %, auto | Space to the left of the content |
Explanation of Values
| Value Type | Description | Example |
px (pixels) | Fixed padding size | padding: 20px; |
% (percentage) | Relative to parent’s width | padding: 10%; |
em / rem | Relative to font size | padding: 2em; |
auto | Browser determines the padding | padding: auto; |
padding: 10px 20px 30px 40px; | Top → Right → Bottom → Left (clockwise) | 10px top, 20px right, 30px bottom, 40px left |
Example
.box {
padding: 20px; /* Adds equal padding on all sides */
}
.container {
padding: 10px 15px 20px 25px; /* Different padding for each side */
}✔ First example applies equal padding
✔ Second example applies different padding values
Qus. 1 : If an element have padding values 20px for top, 30px bottom, 15px for right, 10px for left. Then which of the following is the correct way to set that padding?
- padding: 20px 30px 15px 10px
- padding: 20px 15px 30px 10px
- padding: 15px 30px 10px 20px
- padding: 30px 15px 20px 10px
Programs
css code to design a box using div with following specifications
css code to design a circle using div with following specifications
css code to change the square into circle when mouse is over to the square shape
css code to create 3 different colors box which partially overlapped to each other
CSS code to blink text using keyframes
Design a page titled Website Components
Use HTML and CSS to show the word "Welcome" and apply styles: center alignment, large size, bold, underline, and change color on hover.