Loading...
Loading...
Control spacing on individual sides and create rounded corners
You can control each side independently using properties like padding-top, margin-left, border-bottom.
margin: 20px auto; /* Centers block elements (sets left/right to auto) */
border-radius: 8px; /* Rounds all corners */
border-radius: 50%; /* Makes a circle (with equal width/height) */border: 2px solid #333; /* Solid line */
border: 2px dashed #999; /* Dashed line */
border: 2px dotted #666; /* Dotted line */
border-radius: 50%; /* Circle - use with equal w/h */When two vertical margins touch, they collapse into one (the larger wins):
<div style="margin-bottom: 30px;">Box A</div>
<div style="margin-top: 20px;">Box B</div>
<!-- Gap = 30px, not 50px! -->| Wrong | Why | Right |
|---|---|---|
| margin: 0 auto without width | Wont center | Set width or max-width |
| border-radius: 50% on a rectangle | Becomes oval, not circle | Use equal width and height for circle |
Create a styled button: blue background (#3498db), white text, padding 12px 24px, border-radius 6px, margin 10px.