Understanding position, margin and padding

Margin, padding and position are three ways of defining where your content will be place on the page. Here we'll explain the differences and when to use which.

1. Margins allow you to set a fixed pixel offset from the parent element.

You can use this in combination with the position settings.

Setting the css property to absolute is not required to use margins.

The red textbox will always be 80px away from the bottom of the section, independant of the height of the section.

2. Padding allows you to define the space between the content of the element and it's border.

This is mostly used for adding padding to text.

3. Centering elements can be done using the align tool.

This will set the margin-left and margin-right properties so the element is in it's desired position.

4. Position allows you to set the position of an element without pushing other elements around.

Set the "css position" of the element you want to position to absolute.

Set the "css position" of the parent element to relative.

Then enter 2 of the 4 values. These will express the distance in percentages from the edges of the parent element.

For example, the red textbox is set to absolute and is positioned 0% from the left and 10% from the bottom, so if the section is 800px height on a certain device, the textbox will be placed at 80px from the bottom.

Notes:

Using the align tool only works if the element has a "css position" of static or relative.

Centering a textbox that is absolutely positioned can be done by giving it a position of 50% and then setting the margin to a negative value equal to one-half of textbox width. E.g.: A textbox that is 300px width, set the left position to 50% and the left margin to -150px.