copied over:

Layers and content blocks can be positioned by adjusting margin settings. Their content can be manipulated visually using padding.

Theme Press layers and content blocks follow the CSS box model.

Padding, border, and margin can all be adjusted within the designer without having to manipulate CSS. Negative values can be applied to the margins to move the element itself and the following content. For example, if a -20px top margin is applied, that will move the element 20px towards the top of the page. A bottom margin of -20px will move content following that element 20px closer vertically. You can use padding to position content within a block by adjusting the distance that content resides from the edges of the container.

CSS Box Model

Image Removed

Adjusting Margin

Image Removed

NOTE: THIS NEEDS TO BE REPLACED WITH OUR OWN CONTENT - taken from other source.

CSS Shorthand Syntax

When entering pixel amounts for margins, padding, or spacing, there are four different ways to enter the amounts.

consider adding examples such as following:

Image Removed

Content Block
name Outcome rich-link-hovers true id 1042866408 class tight manual-outcome-flex
Image Removed	The 1-value syntax margin: 10px  The unique value represents all edges
Image Removed	The 2-value syntax margin: 10px 20px The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
Image Removed	The 3-value syntax margin: 10px 20px 30px  The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
Image Removed	The 4-value syntax margin: 10px 20px 30px 40px The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (Nemonic memory trick: the initial letters of Top-Right-Bottom-Left match the order of the consonants in the word trouble: TRBL)
Options in the Page Designer for sizing both margins and padding allow for fine-tuning of page designs, and customizing alignment without needing to add custom code.