Padding and Margin

Padding and margin are essential concepts in page design that contribute to the overall layout and spacing of elements.

Padding refers to the space between the contents of an element and its border. It allows you to create breathing room within an element, adding space around its content. By adjusting the padding, you can control the distance between the content and the edges of the element. This helps to enhance readability, create visual separation, and maintain a harmonious balance within the design.

Margin refers to the space outside the border of an element, creating a gap between adjacent elements. It determines the distance between elements and affects the overall spacing and alignment on the page. By manipulating the margin, you can control the spacing between elements, achieving a desired visual hierarchy, and improving the overall aesthetics of the layout.

It's important to understand and use padding and margin effectively in page design to create visually appealing and well-structured layouts. Careful consideration of padding and margin ensures proper spacing, readability, and an overall pleasing user experience.

---

Adjustments using Design Tab

The video below demonstrates both padding and margin adjustments in the Page Editor using the Design Tab. Please refer to its labelled chapters for more information on the adjustments being made.

Video: Adjusting padding and margin

---

Adjustments using CSS

You can also adjust the padding and margin by using the Custom CSS Classes setting.

In addition to the option of using your own CSS files and specifying the classes, you also have the option of using pre-made padding and margin utility classes from Bootstrap which Zingy supports. Some of these are detailed below.

The size term mentioned below is a number from 0 through 5, with 5 representing the highest amount and 0 representing none.

CSS Class Pattern	Description	Example CSS class
m-<<size>>/ p-<<size>>	Sets the margin/padding in all directions	m-0 through m-5/ p-0 through p-5
mx-<<size>>/ px-<<size>>	Sets the left and right margins/paddings	mx-0 through mx-5/ px-0 through px-5
my-<<size>>/ py-<<size>>	Sets the top and bottom margins/paddings	my-0 through my-5/ py-0 through py-5
mt-<<size>>/ pt-<<size>>	Sets the top margin/padding	mt-0 through mt-5/ pt-0 through pt-5
mb-<<size>>/ pb-<<size>>	Sets the bottom margin/padding	mb-0 through mb-5/ pb-0 through pb-5
ml-<<size>>/ pl-<<size>>	Sets the left margin/padding	ml-0 through ml-5/ pl-0 through pl-5
mr-<<size>>/ pr-<<size>>	Sets the right margin/padding	mr-0 through mr-5/ pr-0 through pr-5

In addition to the above utility classes, Bootstrap also offers responsive versions of the above using the symbols lg, md and sm to desktop, tablet and mobile screen sizes.

e.g. mb-lg-5 would set the bottom margin only on desktops, whereas px-md-2 would set the left and right paddings on tablets and larger screen devices. Another example is mt-sm-3 would set the top margin on mobile and larger screen devices.

Please refer to Bootstrap documentation for more detailed information.