22 min read
Spacing, Borders and Sizing
Margin and padding shorthand, centring with margin auto, border styles and rounded corners, widths, max-width and units.
Margin and Padding Shorthand
| One to four values | |
|---|---|
Centring a Block with margin: auto
Centre the main contentCSS
main { max-width: 1000px; margin: 0 auto; padding: 24px 16px;}max-width stops the content getting too wide on big screens; margin: 0 auto shares the leftover space equally on both sides, so the block sits in the centre. On a phone, the block simply uses the full width.
Borders and Rounded Corners
Border examplesCSS
.card { border: 1px solid #E8DCC8; border-radius: 10px;} .hero-text { border-left: 6px solid #D9962B;} .button { border-radius: 999px;}border is shorthand for width, style (solid, dashed, dotted, double) and colour. You can set one side, like border-left. border-radius rounds the corners; a very large value makes a pill-shaped button.
Width, Height and Units
| Sizing | |
|---|---|
What the browser shows
Try it: Change max-width to 250px and watch the card get narrower but stay centred. Try border: 3px dashed #5A3825 on the card.
Practice
What does margin: 0 20px; mean?
More lessons in CSS · Next: Styling the Navigation Bar · Previous: The Box Model