Putting Boxes Around Text (Technical Tuesday)

Let's go outside the box . . . and inside the box. In fact, let's talk about the box itself. I've had a few people ask me how I put boxes around text.

Like this.

It's not hard to do, and I've made a tool for you to quickly create your own.

Note: This tool may not show up in a news reader. You'll need to visit the blog.



There are some basic instructions included with the tool. If you need more details, I've got your back. Read on.

Box Content

You can type as much text as you want into the box.

You can also put HTML in there. This means that you can have images, buttons, multiple paragraphs, whatever.

Widths

There are three widths you can control with this tool.

• Border Width: The thickness of the line.
• Inside Padding: The space between the line and the text inside.
• Outside Margin: The space between the line and everything outside.

Here's a quick graphic that may make more sense, or you can just play around with the settings. As you change them the Preview will be updated.

Colors

All that's left is choosing some colors.

Get the Code

Now that your box looks just right, switch to the "Get the Code" tab. There you can copy the code and paste it into the HTML view of your blog post. You can also use this code on your website.

Happy Boxing.

* Origami is one of my wow-I-wish-I-could-do-that-but-not-enough-to-actually-practice skills. So when I see things like this decorative box, I'm in awe. And Dominic Alves did a great job photographing it. You can find it and others on Flickr.