Margin vs Padding

margin vs padding hero image

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?

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.

Build a WordPress site fast with a hosting plan that includes a visual drag-and-drop website builder.

check mark100s Free Themes    check markFast & Easy Transfers    check markFree SSLs    check markHack Protection    check markAffordable

WordPress Website Builder Plans

AK
Alyssa Kordek Content Writer I

Alyssa started working for InMotion Hosting in 2015 as a member of the Technical Support team. Before being promoted to Technical Writer, Alyssa developed expertise in the fields of server hardware, Linux operating systems, cPanel, and WordPress. She now works to produce quality technical content featuring cutting-edge topics such as machine learning, data center infrastructure, and graphics card technology.

More Articles by Alyssa

Was this article helpful? Let us know!