Two of the most common types of custom classes that you will use on your site are padding and margins. Padding and margins can be used on every single atom on your WordPress site. On top of this they can be used within row and column settings, therefore it is important to understand how they work, and why you would use them.
Padding and margins are very similar, and it can be difficult to know which one you should use. The basic purpose of both is to change the amount of space between atoms or elements on the page, and change their positions by creating or minimising whitespace.
To understand the difference between padding and margins, you should first know how elements are displayed on the page. An atom, or other element on the page, is made up of: the content itself, space around the content, a border around the content, and space between the border and the border of the next element. Padding affects the space between the content and the border. Margins affect the space between the border and the next element. In some cases the border may not be visible, but will still be affected by padding and margins.
A good example of the difference between padding and margins can be seen when applied to a background image of a row. A row is a single element on a page (ignoring any atoms within the row which may have their own custom classes applied). Applying a background colour to a row will make the borders of the row obvious.
The padding of the row affects the space between where the atoms within the row end and the background colour of the row ends. Adding padding to the row background will increase the amount of coloured space outside of the atoms.
With no padding applied, there is no coloured space above the atom.
With padding applied, the coloured space above the atom increases.
In comparison, the margins are the space beyond the coloured background, between the row and the next row. Adding margins to the row background will increase the amount of white space between the row and the row next to it, i.e. it will push the row down or up, away from the other row.
Paddings and margins can be added on any side around the content. In order to add padding or margins to an atom, row, or column, simply add the value into the custom classes field within the atom, row, or column.
The custom class value should be added in a specific order, with the padding or margin first, the side that you would like the padding or margin to be added to second, and finally, the amount of padding or margin that you would like to be applied. For example, if you would like padding of 25px to be added to the bottom of an atom, simply enter padding-bottom-25 into the custom classes field. More than one custom class can be added within the same field as long as they are separated by a space.
It is important to note that there is a maximum of 60 for both padding and margins and that you can only enter multiples of 5, meaning a value of 23, for example, would have no effect.
Some further commonly used examples:
If you enter paddings or margins into the custom classes field but they seem to have no effect on the element, it may be that you have made a mistake when entering the values. First check that everything is spelled correctly, then check that the structure is correct (padding-bottom-25 rather than bottom-padding-25), then ensure that you have added a valid value (0-60 in multiples of 5). If the custom class is not added correctly, it will not have any effect on the element. Similarly, adding custom classes to an atom to which it can’t be applied, will mean that it has no effect. For example, trying to add “text-right” to an image atom will not have any affect on that atom.
Paddings and margins are not the only custom classes that can be applied to an atom, however, they are two of the few that can be applied across almost every atom and element of a page. Therefore, it is important to understand how and why you should use them.