“Basically, a margin is the space around an element and padding refers to the space between an element and the content inside it.”
The Difference between Margin and Padding in CSS
So the margin falls outside your adjacent elements. Per each side of the element has a margin size you can change. In making the gap, the margin pushes the adjacent elements away.
Padding is best placed inside the border of an element. In order to create the gap, the padding can grow in size which makes the element’s size grow or shrinks the content inside. By default, the size of the element still increases.
When to use Margin and Padding
When you’re fixing the layout of your design, you will need to figure out whether to adjust the margins or the padding to achieve the desired visual effect.
With CSS Margins it helps determine the space surrounding an element, therefore margins would be used to move an element up or down on the page, as well as left or right. If the width of your page is fixed, centering any element horizontally is very simple: all you have to do is just assign the value margin: auto.
You would also use margins to set the distance between nearby elements. For instance, use margins to add space between images or between an image and add text description below it.
CSS padding is best determined to show how elements look and sit within a container. You would change the padding if you want to create space between an element and the edge of the container, or the border. This would also show the container’s background around the element inside it.
Padding is also used to change the size of the element. When increasing the padding value, the text will stay the same size, but there will be more space around it. The element will also fill more space inside the container.
Box Model
In CSS, the box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a box. Hence the box model above.
To ensure proper alignment, you’ll just need to do some math. However, if you’re not understanding the box model and how the box model works, you could end up with a sloppy layout.
Adding Margins and Padding in CSS
Margin
Each element comes with four margins to be declared: top, right, bottom, and left.
In order to set the margin area for the side of an element, you use margin-top, margin-right, margin-bottom, and margin-left properties. You can also just set the margin on all four sides by using the shorthand property: margin.
To be more specific the margin property with one, two, three or four values depends on the side you want to apply it to. If you want even margins on every side, you’ll only need to apply one value. The order of the values is crucial:
- 4 values apply to the top, right, bottom, then left. Like a clock
- 3 values apply to the top, right and left, then bottom.
- 2 values apply to the top and bottom, then right and left.
Padding
To set padding, you can use padding-top, padding-right, padding-bottom, and padding-left properties. Alternatively, you can use the shorthand property: padding.
When using the shorthand property, you may define the padding using one, two, three or four values as follows. As with margins, one value will apply on all four sides. Otherwise, the order the values are written will determine which sides each applies to:
- 4 values apply to the top, right, bottom, then left.
- 3 values apply to the top, right and left, then bottom.
- 2 values apply to the top and bottom, then right and left.
Google Chrome Extension
This Google Chrome extension helps adds outline to all elements on the page to show the culprit element which is changing desired layout.
Extension: Debug CSS
