Table of Contents

Margin and Padding: Basic PageFly parameters that keep your page on point

Our operations are supported by commissions earned from affiliates. Details.

When creating a new page with PageFly, you probably want to configure all your page elements to display the way you imagine it to be. However, if you (at least once) struggled with the app and its parameters while customizing, this blog post will surely help you out.

Some settings can be unfamiliar to many of us, who don't really know anything about coding language. In this blog post, I will share about the Box Style with “margin” and “padding” that appears a lot in the styling tab of every element.

box styles

At first, it might be confusing since they seem like they both have something to do with the white space around an element. However, once you understand the difference between margin and padding you'll be able to make better design decisions. Basically, margin is the space outside something, whereas padding is the space inside something.

Padding goes around all four sides of the content. Margin is the space between the border and next element. The space outside the border between it and the other elements is the margin. The CSS box model is essentially a box that wraps around every HTML element. The box model allows us to add a border around elements, and to define space between elements. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

margin and padding explanation

W3School explains about CSS Box model:

  • 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

That's all for now, there are more to come in the near future. I really hope that you now have a better understanding of these parameters and create much more beautiful pages. Good luck! 

Explore Now

Explore the #1 Shopify Page Builder today

Try PageFly Free