Spacing out website content with padding and margin

This tutorial is all about spacing out the WordPress website content. I am using the Salient theme with WPBakery visual builder to show you different ways in which Margin and Padding are presented in different elements. Let your website breathe and look more professional with these simple corrections.

CSS Box Model to understand the difference between Margin and Padding.

Melderis - Web Building AcademyExplanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

Note: Padding can be only positive, but Margin can be positive or negative. If you need to decrease space between 2 objects you can use margin negative (for example: -10px).

Leave a Reply