Margin vs Padding

When working with Cascading Style Sheets, also known as CSS, it is likely that you will encounter the concept of margin vs padding. While these two concepts are generally interchangeable in the context of everyday conversation, in CSS they represent two distinct aspects of website design. Through the use of margins and padding, page elements can be repositioned, changed in size, or moved relative to another page element. In this article, we will discuss margin vs padding in the context of CSS-based website development. 

Topics Include:

• What is Margin?
  • Example of Margin Code
• What is Padding?
  • Example of Padding Code 

What is Margin?

Margin, in the context of CSS, refers to the space around an element’s border. This is the property that controls the space around a page element such as an image or chart. For example, if an image has a margin of 20 pixels, then the image will be displayed on the page with an empty space 20 pixels wide all around the border of the image. If this number is increased, the amount of margin is increased as well. By setting the margin to a desired value, you can separate page elements as you see fit. 

Margins are best used for:

• Changing an Element’s position on the page – Useful for moving page elements such as photos or buttons around the page.

• Setting the Distance Between Nearby Elements – Useful for spacing out page elements.

• Overlapping Page Elements – Useful for creating mosaics, collages or other designs. Also useful for creating menus and other page elements such as logos.

Example of Margin Code

Below is an example of CSS code used for setting margins. Note how there is a value for each side of the page element. This value determines how much space will be between this page element and other page elements.

#div-0 { margin: 20px; }
#div-1 { margin-top: 20px; }
#div-2 { margin-right: 20px; }
#div-3 { margin-bottom: 20px; }
#div-4 { margin-left: 20px; }

Padding

Padding, in the context of CSS, refers to the space within an element’s border. Essentially, the padding property controls the space within the page element and determines how the content inside appears. For example, a text box with 20 pixels of padding will have 20 pixels between the border of the text box and the text itself, also known as the content. If you increase the padding value, the amount of space between the content within the element and the walls of the element itself will increase as well. 

Padding is best used for:

• Adding Space Between Content and its Border – Useful for changing the shape of a page element.

• Changing the Size of an Element – Useful for changing the size of buttons and text boxes.

Example of Padding Code

Below is an example of CSS code used for padding. Note how the code has a value for each side of the content that is being padded. This value will determine how much padding is used within the page element in question.

#div-0 { padding: 20px; }
#div-1 { padding-top: 20px; }
#div-2 { padding-right: 20px; }
#div-3 { padding-bottom: 20px; }
#div-4 { padding-left: 20px; }

Now that you have a better understanding of margins vs padding and how they can be used, you can better design your website how you’d like.