Margins, Padding, Borders and Width in CSS

The next thing one should know about when working with the size of an element is margins, padding, and width.

Margins

Margins are simply the space between two elements. We can specify the margin to be the same all the way around an element, the same on the left and right and a different value for top and bottom, or to have different values for all four sides.

Because this is the space between two elements, or between the (inner) element and the parent element, the background of neither inner element is shown, however, a parent element background will be shown if it is set.

Look at the following rule examples to see how you can set your margins.

margin: 20px; /* all four sides get a margin of 20px */
margin: 10px 20px; /* top and bottom get a margin of 10px, left and right get 20px margin */
margin-top: 20px; /* top has a margin of 20 pixels */ 
/* note you can use -left, -right, -top, or -bottom */
margin: 10px 20px 20px 50px; /* you read the first element as the top margin, and move around the four sides in a clockwise manner */

It isn’t common, but you can change unit measurements within your different sizes as is seen in our example below:

main {
    margin: 20px 5em;
}

Margin is unique in that it can also be set to “auto”. An auto setting on the height doesn’t do anything. However, if the width is set, and the containing element is larger than the element you are styling, setting a margin to auto for the left and right value will center the element on the screen.

Note, this does not center the next, it only centers the block element.

.example-block {
    width: 250px;
    margin: 20px auto;
}

Padding

Padding is the space between the edge of the element and where the content of the element resides. The padding allows for a space where the background of the element is shown.

The same way you define the margin in CSS you can define the padding, with the exception of auto, which is not used in padding.

padding: 20px; /* all four sides get a padding of 20px */
padding: 10px 20px; /* top and bottom get a padding of 10px, left and right get 20px padding */
padding-top: 20px; /* top has a padding of 20 pixels */
/* note you can use -left, -right, -top, or -bottom */
padding: 10px 20px 20px 50px; /* you read the first element as the top padding, and move around the four sides in a clockwise manner */

Border

Borders allow us to put a colored border around our elements. While you can specify a textual value (thin, medium, or thick) for the border thickness, most people use a pixel value.

You can assign a color to your border, as well as a style – although the default of solid is the most common style used.

Borders are a bit weird, in that you can specify each side individually, or all sides the same way. Likewise, you can set each of the three parameters (size, style, and color) individually as well as using a CSS shortcut to set them all at once.

Therefore, each of these is legal:

border: solid 2px #f0f /* solid, 2px wide border that is bright purple */
border-style: dashed /* use a dashed line for the border */
border-width: 5px 2px /* top and bottom borders are 5 pixels in size, and left and right are only 2 pixels wide */

We could go on with these, but I think you see the idea.

Width

The width of an element is how wide it will appear on the screen. By default, the padding and border widths are added to the width of the element to give the overall width on the screen.

I say this is by default because you can change the box-sizing property to make changes to this.

By specifying the border-box value, the border, padding, and width combined make up the width of the element. The default is the value

content-box.main {
    box-sizing: border-box;
} 

Margins, Padding, Borders and Width in CSS was originally found on Access 2 Learn