The CSS box: margin, padding and border
The outer space is margin, the inner space is padding, and the line is border.
All lessons · CSS lessons: color, box and hover
Three spaces
Every element is a box. border is the line. padding is the space inside the line. margin is the space outside the box.
.card {
margin: 16px;
padding: 12px;
border: 1px solid #2f6bff;
background: #101826;
color: white;
}Which one when
If the text sticks to the edge, add padding. If two boxes touch, put margin between them. If no line shows, write a border.
Questions
Are margin and padding the same? No. margin is outside, padding is inside.
What is 16px? 16 pixels. A small space on the screen.
What if there is no border? The box stays, but no line shows.
Where does the color go? background paints the inside of the box, color paints the text.