Positioning Content

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

Adjusting Margin

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.

	The 1-value syntax margin: 10px  The unique value represents all edges
	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.
	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
	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)

Values applied using 4-value shorthand syntax

consider adding examples such as following: