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.
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.
Last updated