Configure spacing

Understand margin & padding

Firstly, you need to understand the difference between margin and padding to use the right parameter for the job.

Use padding properly

• Use padding to create “inner space” around the content to avoid content “touching” the edge of the container.
• The best practice is to keep the top & bottom and left & right padding the same.
• Set padding for the container which contains the element, not the element itself.

Use margin properly

• Use margin to create spacing between content blocks.
• Margin should be set from top to bottom and left to right. For example:
  • Notice that the bottom margin of the top element will overlap with the top margin of the bottom element. Therefore no need to set the top margin of the bottom elements.
  • The bottom margin of the last element in the container should be 0px
  • Notice that the right margin of the left element will NOT overlap with the left margin of the right element.
• To create vertical spacing between the 2 elements in a column, set the bottom margin of the top element.
• To create horizontal spacing between the 2 elements in a row, set the right margin of the element on the left.
• Set margin exactly to the element that needs surrounding spacing. For example:
• To create vertical spacing between elements inside a container, set the margin to those elements.
• To create vertical spacing between rows inside a section, set the margin to those rows.

Do not use columns to create side spacing

Do not use columns to create side spacing. Instead, set left /right padding for the container.

Set spacing for content “growth”

Set spacing in the way that content can be added later without breaking layout.

Build a proper layout on different devices

Customize layout for different devices 

With JSN PageBuilder 4, you can select the device and edit the layout for the individual.

Arrange content in multiple columns on mobile

With the list element, you can set the number of items per row and spacing between them.

Add spacing between two columns

Add an equal amount of spacing around the column

Use the parameter “Columns Spacing” in row settings to change space between columns.

Note:

• The system will automatically set the negative left /right margin of the row as half of the Columns Spacing to make row reaches side edges.
• Thus, it’s recommended to have Columns Spacing = 30px by default to build a clear layout.

Add specific side spacing of the column

If you need to have special spacing between columns, use the margin-left /right parameter in the column’s settings.

Align content horizontally at the centre

Align the whole container

• Set equal left/right padding to make the inner container content stand at the centre.

Important!

• Don’t forget to check and update this padding on the mobile view. It’s very common that on the desktop there is a big side spacing, but on mobile, the pixels is smaller or even zero.

Align content elements within a container

If Flex is not applied to the container

Select the container and set centre alignment.

If Flex is applied to the container

Set “Justify Content” to “Center”.

Align content vertically in the middle

If the container’s height is fixed

If the column does NOT have any background

Set the “Content Position” parameter in row’s settings to “Center Middle”.

If the column does have a background

1. Wrap content to the “Block” element.

2. Set Display Style to Flex for Column, then “Align Items” to “Center”.

If containers height is flexible

Use the top/bottom padding of the Section to adjust its height.

Important!

• Do not set the Height parameter for the column at the same time as top/bottom padding.

Align two inline elements vertically

By default, inline elements will stand side by side (left / right) with each other. To align them vertically in an independent row, you need to wrap them in a Block element.

Handle common layout

Content in “zigzag” layout

It’s a common situation when you need to present content in a zigzag layout, i.e. the first row has an image on the left, second - image on the right, etc.

On mobile, the default responsive mechanism will make 2 text blocks appear near each other.

To fix this, select the second row and set Flex Direction to Column-Reverse.

Content card

Card #1

How to do: 

1. Wrap content to Block element and set padding.
2. Set “Image Size” to “Full Width”.
3. Use heading for card title.
4. Set margin-top of the heading to “0”.
5. Set background colour to the block.

Card #2

How to do: 

1. Create 1st row with 2 columns layout
• Set Content Position parameter to Center Middle.
• Set margin-right of the left column to adjust the distance between the 2 columns.
• Set margin-bottom of the row to adjust the distance between 2 rows.
2. Create the 2nd row with 1 column layout
• Add Paragraph element and fill in your own content.

Content banner

How to do: 

1. Set background image to the column
• Set “Height” in accordance with the banner image’s height.
2. Adjust spacing inside the banner
• Set padding to avoid content “touching” to the edge. 
• If you want to align content horizontally at the centre, set parameter “Alignment” to centre.
• If you want to align content vertically in the middle use Flex method.
3. Don’t forget to choose content element properly. 

Content outside the container

To build content outside the box layout as the above screenshot, do the following:

• Set a negative margin to the top or bottom of the column containing content.

Content block on one side

To have content block shifted to the side, do the following:

• Set left / right padding of the container to shift content to the opposite side.

Important!

• Don’t forget to check and update this padding on the mobile view. It’s very common that on the desktop there is big side spacing, but on mobile, just a few pixels or even zero.

Content bar

To build a bar of one or various inline elements standing side by side:

• Wrap all elements in Block containers.
• Set the margin to elements from left to right.

If elements do not have the same height and you need to vertically align them in the middle:

• Set Display = Flex for block, then
• Align Items = Center
• Justify Content = Center

References

• https://www.pluralsight.com/blog/creative-professional/whats-difference-margin-padding
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  

---

Previous chapter: Chapter 3: How to add Content to Joomla page

Next chapter: Chapter 5: Style your Pages with default settings