CSS Margin and Padding
What is the difference between Margin, Border, and Padding?
CSS Margin vs. Padding: What's the Difference?.
If you’re new to CSS, you might have heard the words “margin” and “padding” but are not quite sure what they mean or how to use them in your website designs. The concepts have to do with the same thing in CSS, however, there are important fundamental differences in their usage. Once you fully understand them, you’ll be equipped to make better design decisions.
What’s the Difference Between Margin and Padding in CSS?
See for yourself.
Basically, a margin is the space around an element and padding refers to the space between an element and the content inside it. The margin falls outside two adjacent elements. Each side of the element has a margin size you can change individually. In creating the gap, the margin pushes adjacent elements away. On the other hand, padding is placed inside the border of an element. To create the gap, the padding either grows the element’s size or shrinks the content inside. By default, the size of the element increases. If you want to create the gap by shrinking the content, set the box-sizing property value to border-box (i.e. box-sizing: border-box).
When Should You Use Margins vs. Padding?Ever Wondered?!
When you’re adjusting the layout of your design, you’ll need to determine whether to adjust the margins or the padding to achieve the desired visual effect. CSS margins 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 an element horizontally is very simple: 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 the text description below it. On the flip side, a negative margin value would let you overlap elements. You could also use a negative margin to create a header element within a container that has padding values set to keep other elements aligned. CSS padding determines 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 an element. When you increase 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.
