Box Margins, Padding, and Placement

We'll start with the code for a basic box and show you how to modify the margins, padding, and placement. The next page is about changing the border and background colors and the border thickness, and the final page addresses styling the content inside the box.

This is the recommended basic box code:

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;"> 
<p>Basic Box</p>
</div>

This is the box that code will create:

 

Margins

Margins define the space around the outside of the box. We are defining our both margins and padding using units of measurement called rems because they are responsive (to learn more, see the Using Absolute and Relative Values to Size Elements page in the Guidelines module), meaning that they allow content to display correctly on various devices. The first number in the code example (style="margin:1rem 2rem;) defines the margins at the top and bottom of the element (in this case, a box), and the second (style="margin: 1em 2rem;) defines the right and left margins. Defining the margins affects the distance between the page element and the surrounding text or page borders. Adjusting the margins can help bring emphasis to a design element or create a visual break to the page.

Recall that the margins for our basic box are margin: 1rem 2rem. If you want the box to extend the full width of the page, just change the right and left margins by changing the 2 to a 0.

This is the code for a full-width box:

<div style="margin: 1rem 0; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">
    <p>Content.</p>
</div>
 

If you want the margins to be wider, just make the number for the right and left margins larger. For example, this box has the margins set at 5rem.

This is the code for the narrower box:

<div style="margin: 1rem 5em; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">
    <p>Narrower box.</p>
</div>

Padding

Padding refers to the space between the border of the box and the content inside. In the basic box code above, 08.rem refers to the space to the left and right of the text and 1rem refers to the space between the top and bottom of the text. 

In this box, the padding has been increased to 4rem 4rem, and filler text has been added so you can see the effect of this change:

This is the code for the box with more padding:

<div style="margin: 1rem 2rem; padding: 4rem 4rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">
  <p>Content here.</p>
</div>

Placement

It is possible to put some content in a box to the right of the content. This is referred to as floating the box right.

 

Example of Box Floated Right

This is an example of text with a box to the right of it. This box has a width of 30%. In our examples above, there was no width because we adjusted the margins instead. 

This is the code: 

<div style="width: 30%; margin: 1rem 1rem; padding: 1rem 1rem; float: right; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">Content inside the box.</div><p>Content to the left of the box.</p><p style="clear: right;">Text below the box.</p>

 

Quick Tip: Clearing Content

The code style="clear: right;" will need to be added to the element below the box, as shown in the example; otherwise, it may interfere with the order the content is read on the page by a screen reader and how the content displays at different screen widths.