• FACE RESEARCH LAB
• LISA
• PUBLICATIONS
• PROGRAMS
• TEACHING
• CONTACT

• Login

• Username:
• Password:

Many people use the <br> command for spacing. That's what CSS is for. You can add spacing to an element using the padding and margin properties. If you add a margin to an object, it is a clear space around the object that will overlap with other objects' margin. For example, if you give your paragraphs a margin of 10px, there will be 10 pixels of space between paragraphs (not 20) because each paragraph's margin will overlap with the previous and next paragraphs' margins.

If you add padding to an element, that adds space around it that is the same colour as the background of the element and does not overlap with other elements' padding. Examples are below. The background is set to red and the border to yellow so you can see where these are in relation to the margin. The margin will show up as black space and the padding will be red.

You can set padding or margins on all 4 sides to the same value (e.g. 10px) using the command margin: 10px; or you can set the top and bottom margins to 10px and the left and right margins to 0px using the command margin: 10px 0;. You can set the top, right, bottom and left margins to different values, too (e.g. margin: 5% 10% 15% 5%;). Additionally, if you only want to change the margin or padding on only one side, you can use the command such as margin-left: 10px;.

You must specify units for your margin and padding values. em is a unit that is sized relative to the font size you are using. px refers to pixels on the screen. You can use % to specify a percentage of the size of the parent element (whatever the thing you are setting the margin or padding for is inside, in this case it is the white box).

Disclaimer: The information found and the views expressed in these homepages are not the responsibility of the University of Aberdeen nor do they reflect institutional policy.