Simple Boxed Text

---

While some use color--either text color or highlighting--to emphasize text, a box around text can be more effective, and more aesthetically pleasing. Here are two simple boxes you can use to draw attention to important information:

Simple line

1. Enter the text editor, and toggle to the HTML editor;
2. Copy the code (below) and paste into the editor;
3. Highlight the placeholder text (Text goes here), and insert your text;
4. Toggle back to the RCE to format your text, including centering.

Code

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

 

Double line

1. Enter the text editor, and toggle to the HTML editor;
2. Copy the code (below) and paste into the editor;
3. Highlight the placeholder text (Text goes here), and insert your text;
4. Toggle back to the RCE to format your text, including centering.

Code

<div style="margin: 20px 20% 20px 20%; border: double 5px; border-color: #106ffe; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

 

Modifying the Look of Your Boxes

You can modify your boxes in several ways:

• change the amount of white space above and below the box;
• change the amount of white space to the left and right of the box;
• change the amount of white space around the text in the box;
• change the color and thickness of the box's lines.

 

First, let's look at the white space around your boxes, called margins. This is the snippet of code that affects the margins: margin: 20px 20% 20px 20%.The margin variables are in order, but the order is a box pattern, clockwise,--top, right, bottom, left:

To Modify White Space Above and Below the Boxes

It's easy to change the amount of white space above or below your box, which can dramatically affect the overall look of your page. To change the white space, you'll need to adjust the variables that control the top and bottom margins by increasing (more white space) or decreasing (less white space) the number. 

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

To Modify White Space on the Sides of the Boxes

It's easy to change the amount of white space to the right and left of your box, too. To change the white space, you'll need to adjust the variables that control the right and left margins by increasing (more white space) or decreasing (less white space) the percentage. 

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

To Modify the White Space Around the Text within the Box

Finally, you can modify the white space surrounding the text within the box, called padding. Like the margins, the padding variables are in clockwise order: top, right, bottom, left. Here are the variables you need to adjust to increase or decrease white space within the box:

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

Box Outline Color and Thickness

You can change the color of your box by changing the hex code:

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

You can change the thickness of the box outline by changing the pixels (px)

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>Text goes here</p>
</div>

Modify the Text in the Box

Switch back to the RCE to modify the text inside the box. Though we caution you to always use paragraph styles to denote heading levels, heading levels should not be used to emphasize text. Instead, use Bold, Italics, and font sizes to emphasize text within your boxes. 

Consider, for instance, the very real difference formatting makes between these two boxes with identical words: