CSS Padding, Border and Margin - HTML Element Box

Padding, Border and Margin properties affect the space around an HTML element. When learning to author web pages understanding how the space around content is defined and used is fundamental design knowledge. The content of each item on a HTML page uses a Box Model when displayed in a web browser. This article is a tutorial on understanding the content, padding, border and margin parts of that model.

How Padding, Border and Margin Properties Affect HTML Elements

There are two major types of HTML elements block, where the element content starts below the previous element, and inline, where the content starts next to the previous elements content. For example the paragraph element, <p>, element separates text into blocks (this paragraph and the one following are in there own <p> element. Compared to the emphasized element, <em>, which usually gives text an italic look directly in the place it is used.

Each element has some content, then the space around content is defined in terms of:

Padding (the space between the content and the border)
Border (the line around the content and padding)
Margin (the space between the border and the surrounding elements)

This is illustrated in this diagram from the CSS specification. CSS stands for Cascading Style Sheets, style sheets are used to format all the visual aspects of a web page.

HTML Content Padding Border Margin

The padding, border and margin can be broken down into top, right, bottom and left segments, illustrated in the diagram. (I.e. TP for top padding, RB for right border, BM for bottom margin, LB for left border, etc.) This is know as the Box Model. All the parts of the Box Model can be formatted with CSS.

Box Model Browser Defaults

A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (e.g. save the Mona Lisa picture below).

Mona Lisa by Leonardo da Vinci

Add a red border to the image and some text with a blue border, the borders are added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds helpful text color coding when editing an HTML file).

<!DOCTYPE html>
<head>
</head>
<body>
<img style="border:solid red" src="Mona_Lisa-Leonardo_da_Vinci.png"/>
<p style="border:solid blue">Mona Lisa</p>
</body>

A Basic Web Page

The above example code shows that the image element, <img>, is an inline element (the border is local to the element) and the paragraph, <p> is a block element (the border is the width of the web page).

Margin Space

Notice the white space between the edge of the browser window and the red and blue borders. This is not the result of a default margin setting on the elements, but on the <body> element of the HTML document. This can be removed by setting the body's margin to zero, style="margin:0;". The white space between the two elements is the result of a default margin on the paragraph element. To get the paragraph element's border to wrap just the content, and not extend to the width of the page, the width of the <p> element can be restricted (for example using a style such as width:100px;, or by wrapping the text in a <span> and setting the border on that):

<!DOCTYPE html>
<head>
</head>
<body style="margin:0;">
<img style="border:solid red;" src="Mona_Lisa-Leonardo_da_Vinci.png"/>
<p style="margin:0;"><span style="border:solid blue">Mona Lisa</span></p>
</body>

Simple HTML Page With No Border

The remaining small white space between the two borders is reserved for text descenders (<img> is an inline element so text can be next to it and space is saved below a line for letters like 'g' and 'p'). To completely remove the space set the image display as a block (using style display:block;) or wrap it in a <div> with a height style set to the image height (plus allowances for padding and border settings).

Make All Browser Elements Boxes the Same

There are some small differences on how default settings for the HTML elements box model, as well as other HTML aspects, are displayed between browsers. The differences depend upon:

Different browser makers: IE and Edge from Microsoft; Chrome from Google; Firefox from Mozilla; Safari from Apple; and Opera
Browser versions
Operating systems and versions
Mobile browsers v desktop browsers

The display differences can be catered for by using easily available style sheets. Otherwise the alternative is to try and figure out the work arounds required for the default settings for the various browsers yourself. Example stylesheets include Reset CSS, HTML5 Reset (derived from Reset CSS), normalize.css, and YUI CSS Reset. Either add a reset style sheet to your web site or link to one on a Content Delivery Network (CDN), e.g.:

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
</head>
<body>
<img style="border:solid red;" src="Mona_Lisa-Leonardo_da_Vinci.png"/>
<p><span style="border:solid blue">Mona Lisa</span></p>
</body>

These reset style sheets are more controlled than the Universal Reset method, which uses the global * selector: *{margin:0;padding:0) or *{padding:0;margin:0;border: 0;outline:0;}. Choose the reset method best suited for your designs, here is how three of the reset style sheet methods affect our simple web page.

Reset CSS

Simple Web Page with Reset CSS

YUI Reset

Simple Web Page YUI Reset

normalize.css

Simple Web Page with normalize.css

All Together Now

This example illustrates some of the padding, border and margin settings all together. The page background is set to pink (fuchsia). The background for image and paragraph span is yellow. They are surrounded by a <div> (with border and background color set to black and white for the image, and green and silver for the paragraph).

Simple HTML Page with Padding Border Margin

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Box Model Demo</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"/>
    </head>
    <body style="background-color: fuchsia;">
    <div style="margin:4px 4px 0px 4px; background-color:white; border:2px solid black;">
        <img style="margin:5px; background-color: yellow; border:10px solid red; padding: 5px;" src="images/Mona_Lisa-Leonardo_da_Vinci.png"/>
    </div>
    <div style="margin:0px 4px 4px 4px; background-color:silver; border:2px solid green;">
        <p><span style="margin:5px; background-color: yellow; border:3px solid blue; padding: 4px;">Mona Lisa</span></p>
    </div>
    </body>
</html>

This illustrates how the padding shows the background color and how margin is transparent (note borders can be set transparent). To set different size sides for padding and margin add a hypen and the word top, right, bottom or left, as in margin-left:10px; or padding-bottom:10px;. There is also the shorthand of following padding or margin with one to four numbers to represent the top, right, bottom, left values, for example:

p { margin: 2em }                /* margins set to 2em */
p { margin: 1px 5px }            /* top,bottom to 1px, right, left = 5px */
p { margin: 1em 3em 3em }        /* top to 1em, right to 3em, bottom to 3em, left to 3em (same as right) */
p { margin: 5px 10px 10px 20px } /* top to 5px, right to 10px, bottom to 10px, left to 20px */
/* Below is the same as one immediately above */
p { margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 20px; }

When using the numbers remember the order by using hands on a clock moving in a clockwise direction (top, right, bottom, left). Individual border edge widths can be set in a similar way using border-top-width, border-right-width, border-bottom-width, border-left-width, likewise for color: border-top-color, border-right-color, border-bottom-color, border-left-color.

Read more about the Box Model, padding, borders and margins in the CSS specification, including settings not covered here. There is an article at http://learn.shayhowe.com/html-css/opening-the-box-model/ which provides additional detail and covers positioning. Some of the demo code can be seen in action on the Box Model Demo HTML page.