Borders/Margins/Padding

Borders

Borders, margins, and padding are also useful to open up a design and make things easier to read. They can be used to separate one section of text from another. They can be applied to another element and can also be used more creatively for instance, you can use them to make a frame for a picture, or use a them on only one side as a separator.

Borders are commonly used in order to get horizontal lines on a page. This is done by placing the border on the left or right sides of an element. There are various ways to create a border. To learn how to use something different for each side of a border head to W3Schools.

To create a border you have to specify three things, the width, the style, and the color.

div { border-width:1px;
border-style:solid;
border-color:#0000ff; }

Your width will define how thick the line, with 0px being non-existent, and 1px being the smallest. However they can get as big as you'd like.

The style can be one of 8, play around with them and you will find that many of them have uses, although the most common is the solid border.

solid
dashed
dotted
inset
outset
groove
ridge
double

And color, color can be specified with a name such as black, pink, magenta, red, blue, or yellow. But in order to open up more colors to use you should consider using hexadecimal values, also known as hex codes. For instance #ff0000 is red, and #0000ff is blue. If you are unsure what color to use, then take a look at this list of colors.

Border Shorthand

However there is an even quicker and more efficient way than this to create a border. Instead of typing it all out the shorthand helps you by having you specify that you are adding a border, and then having you write it all in the order of width, style, color. This way it knows what each value is meant to be. The same border seen above can also be coded as:

div { border:1px solid #0000ff; }

Margins

Margins are empty space around the edges of an element that other things can't go into unless they are absolutely positioned into the space. See on this page how my text doesn't run straight to the edge? Or how my page isn't stuck to the edge of the screen? That is from the help of margins.

This is how you add a margin that is equal all the way around an element.

div { margin:15px; }

And this is how you add a different margin so that the top and bottom are the same, and the left and right sides are the same. There is a trick here as well. If you want something to be centered, if both elements have a width on it you can replace one of the values with auto, this is how this website always shows up on the center of the screen.

body { margin:0px auto; }

div { margin:0px 15px; }

The same as you can with borders you can also use margin-top, margin-bottom, margin-left, and margin-right.

Padding

Padding is very similar to margins. The only difference between the two is that padding will add the space inside of the element and margins will add the space to the outside of it. While padding can not use the auto element, the setup for it is the same. Here is an example of a unified padding within an element:

div { padding:15px; }

And here is an example where the top and bottom are unified, and the right and left sides are unified.

div { padding:0px 15px; }