Margin, Padding and Border
Padding creates space between content and the border. Margin creates space outside the border. Borders visually surround the padding and content areas.
Logical properties such as margin-inline, padding-block, and border-inline-start are preferable when building interfaces that may support different writing directions.
Spacing Around a Box
Logical Spacing
.panel {
padding-block: 1.5rem;
padding-inline: 2rem;
margin-inline: auto;
border-inline-start: 4px solid currentColor;
}💡 Logical properties describe relationships such as inline and block direction rather than hardcoding left and right.
Key Takeaways
- Padding is inside the border; margin is outside.
- Logical properties improve internationalization support.
Knowledge Check
Which property creates space inside an element's border?