Unit 4: Styling your website

4.5 Styling general elements (spacing, border, background)

Styling general elements (spacing, border, background) 

When it comes to styling options, the Editor allows you to work with three main, high-level elements that differentiate the overall website design - Spacing, Border and Background. These are the variables that will determine the general look and feel of your website.

Spacing

Padding and margin add space to the inside or outside of an element. Padding creates space on the inside of an element, while margin creates space on the outside of an element, pushing other elements away. These spacing options make it possible to refine your layout to your exact needs.

Hovers Hovers

Example of margin

The first button has bottom margin applied, pushing the button directly below it further away.

Adding Spacing to indibidual sides

To adjust the margin or padding on one side of an element, you are able to click in the field you want to adjust and drag the slider to the desired value. To do so, you must ensure the fields are unlocked as you can see in the visual below.

 

You can also click into a padding or margin field and type in the value manually.

Hovers

Adding Spacing to all sides

To adjust the margin or padding on all sides of an element, you are able to click the lock icon which will initiate an overlay, asking you to set the value for all four fields (left, top, bottom and right).

Hovers