<< Digital Humanities Resources Home Page

Margins and Boxes

Normally, a paragraph of text will stretch all the way from the left side of the screen to the right side before wrapping to the next line. This can result in a distracting "clipped" appearance. Occasionally, your text may be too close to something else on your page as well. For instance, image the box below as the browser window.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit enim magna, ac dictum augue. Quisque blandit, mi quis pulvinar blandit, purus sem blandit eros, non porta justo massa ut nisi. In hac habitasse platea dictumst. Pellentesque fermentum gravida nunc ut auctor. Suspendisse quis risus vel tellus congue imperdiet. Morbi vitae mauris neque. Vivamus ut lorem sem, in facilisis purus. Mauris quam nunc, interdum sit amet ultricies ac, faucibus eget lorem. Phasellus tempor suscipit neque, vel cursus lacus volutpat quis. Proin feugiat lacus vel eros rhoncus et varius arcu rutrum. Vivamus sapien lorem, ullamcorper eget luctus a, placerat at eros. Phasellus aliquam varius mauris, quis condimentum est fermentum vitae. Cras varius velit eu massa fringilla porta. Vivamus a porttitor neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam adipiscing dictum pharetra. Phasellus et ipsum at leo rhoncus posuere.

See how close the text is to the border? How would we create a margin so it looks like this:

There is actually more than one way to achieve this effect. In order to understand them, you need to understand the CSS Box Model. Imagine every element on the screen as occupying a box. There is a space outside the box frame called the margin and a space inside the frame called the padding. The <body> tag is element on the screen, so what if we did this in our stylesheet?

body {margin: 50px; padding: 50px;}

Since everything on our web page is inside the <body> element, we have now placed 50 pixels of space (the margin) between our content and the edge of the screen. Since we have also put 50 pixels of space inside the <body> element (the padding), there will actually be 100 pixels of space between our content and the edge of the screen.

So that's one way to do it. Another way is to use a <div> element as a wrapper and style that. For instance, what if we put the following in our stylesheet?

#wrapper {margin: 50px; padding: 50px; border: 1px solid black;}

The '#' indicates that this is the name of an element. Inside of our body, we would put the following:

<div id="wrapper"> <p>Lorem ipsum, etc.</p> </div>

This will look exactly the same as if we had styled the <body> element, exceot that this time we have added a black border.

In case you haven't guessed, that's how we get the boxes displayed above. Just add the following to your stylesheet.:

#box {margin: 50px; padding: 50px; border: 1px solid black;}

And in your html, something like this:

<p>Some text</p>

<div id="box"> <p>Lorem ipsum, etc.</p> </div>

<p>Some more text</p>

If you want more than one box, use ".box" instead of "#box" and make your html <div class="box">.

You can also fix the width of your box in the CSS:

#box {width: 250px; margin-left: auto; margin-right: auto; padding: 15px; border: 1px solid black;}

This will give you:

Here we tell the browser to calculate the distance from the edge of the screen automatically so that the box appears in the centre. In addition to margin-left and margin-right, you can also specify margin-top, margin-bottom, padding-left, and so on. There's even a shorthand: "margin: 1px 2px 3px 4px" indicates "margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px" (it goes clockwise).

These CSS techniques seem straightforward, but they are a very simplified account of the CSS box model. You should be aware that the box model is not implemented the same way by every browser (especially older ones), causing endless headaches for web designers. Internet Explorer 6 is notorious. Here is a full, and fairly readable account of the box model and CSS positioning.

Last update: 20 November, 2009.

Return to Top