Margin Properties
| Property | Possible Values | Description |
|---|---|---|
margin | auto, length (px, em, %), inherit | Shorthand for setting all four margins (top, right, bottom, left) |
margin-top | auto, length (px, em, %), inherit | Sets the top margin of an element |
margin-right | auto, length (px, em, %), inherit | Sets the right margin of an element |
margin-bottom | auto, length (px, em, %), inherit | Sets the bottom margin of an element |
margin-left | auto, length (px, em, %), inherit | Sets the left margin of an element |
Shortcut Values
| Value Format | Example | Meaning |
margin: 10px; | margin: 10px; | All sides = 10px |
margin: 10px 20px; | margin: 10px 20px; | 10px (top & bottom), 20px (left & right) |
margin: 10px 20px 30px; | margin: 10px 20px 30px; | 10px (top), 20px (left & right), 30px (bottom) |
margin: 10px 20px 30px 40px; | margin: 10px 20px 30px 40px; | 10px (top), 20px (right), 30px (bottom), 40px (left) |
Example:
.box {
width: 200px;
background-color: lightblue;
margin: 20px auto; /* Adds 20px margin on top & bottom, centers horizontally */
padding: 10px;
}✔ 20px margin on top & bottom
✔ Horizontally centered with auto
Qus. 1 : If an element have margin values 20px for top, 20px for bottom, 30px for right, 30px for left. Then which of the following is the correct way to set the margin?
- margin: 20px 20px 30px 30px
- margin: 30px 20px
- margin: 20px 30px
- margin: 30px 30px 20px 20px
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