css
12 minLearning in PidginBoxes and Spacing
Learn di box model — padding, margin and border.
What you'll learn
- Understand di box model
- Use padding and margin
- Add borders
Before you start
- colors-and-fonts
Imagine every element for your page dey inside an invisible box. CSS dey call dis one di box model. To understand am, tink of Ada's food pack:
content— di food inside di packpadding— di soft space wey dey protect di food inside di packborder— di pack wallmargin— di space between one pack and di next one
.menu-card {
padding: 16px;
margin: 12px;
border: 2px solid #ddd;
}padding dey push di content away from di edge, margin dey push di element away from others, and border dey draw a line round di element. Now Ada's cards no go dey stuck together.
Try it yourself
Box model
Open in playground →css
.menu-card {
padding: 16px;
margin: 12px;
border: 2px solid #ddd;
border-radius: 8px;
}