Understand a few key layout terms: padding, margin, and units like px (pixels) and % (percentages).
What Is Padding?
Padding is the space inside an element, between the element's content (like text or images) and its border. Think of it as breathing room inside a box. If you increase the padding, the content moves away from the edges of the box and gives it more internal space.
Example:
Imagine a button with text inside. If you add more padding, the button will grow because the space between the text and the edge of the button increases.
What Is Margin?
Margin is the space outside an element, between the element and whatever is around it—other elements, text, or the edge of the page. Margins are used to create space between different sections on your website.
Example:
If you want to separate two blocks of text, adding a top or bottom margin will push them apart and make the page easier to read.
What’s the Difference Between px and %?
When you're adjusting padding or margin, you'll often see options to set values in px or %. These are units that define how much space to add.
-
px (pixels): A fixed size. No matter the screen size, 20px will always be 20 pixels. This is great for precise spacing.
-
% (percent): A relative size. It adjusts based on the size of the parent element. 10% padding means the padding will be 10% of the width (or height) of the container it’s in. This is useful for responsive design.