CSS Padding, Border and Margin – The HTML Element Box

How HTML Elements are Affected By Padding, Border and Margin Properties

Padding, Border and Margin properties affect the space around a 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 a web browser displays it, this article is a tutorial on understanding the content, padding, border and margin parts of that model.

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 (<p>) element separates text into blocks (this paragraph and the one above are in there own <p> element). Compared to the emphasized (<em>) element which usually gives text an italic look directly in the place it is used. Each element has some content, 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), and margin (the space between the border and the surrounding elements). This is illustrated in this diagram from the CSS specification.

HTML Content Padding Border Margin

Mona Lisa by Leonardo da VinciThe 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. A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (see right) with a red border and some text with a blue border, the borders added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds color coding).

A Basic Web PageThis example shows that the image (<img>) element 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). 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> of the HTML document. This can be removed by setting the body’s margin to zero (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 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:

 

Simple HTML Page With No BorderThe 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 between browsers from different producers (IE, Chrome, Firefox, Safari, Opera), browser versions, operating systems and mobile browser versions with regards to default settings on the HTML elements Box Model, as well as other HTML aspects. These differences can be catered for by using easily available style sheets instead of trying to figure out work arounds for the default settings for the various browser yourself. Examples include Reset CSS, HTML5 Reset (derived from Reset CSS), normalize.css, and YUI CSS Reset. Either add a reset style sheet to you web site or link to one on a Content Delivery Network (CDN). e.g.:

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 those methods affect our simple web page.

Simple Web Page with Reset CSS

Reset CSS

Simple Web Page YUI Reset

YUI Reset

Simple Web Page with normalize.css

normalize.css

Simple HTML Page with Padding Border MarginThis example illustrates some of the padding, border and margin settings all together. The pages background is set to pink (fuchsia), the image and paragraph have yellow backgrounds, 5 pixel border and are surrounded by a <div> (border and background color set to black and white for the image, and green and silver for the paragraph). 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:

When using the numbers remember the order by using hands on a clock moving in a clockwise direction (top, left, bottom, right). 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 herer, there is an article at http://learn.shayhowe.com/html-css/box-model which provides additional detail and covers positioning.

Abbreviations

  • HTML – HyperText Mark-up Language
  • CSS – Cascading Style Sheets
  • CDN – Content Delivery Network

Acknowledgements

Box Model Diagram from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.