How to create a Box in HTML - with code examples

Boxes are used in HTML to create a layout, display text or images or add decorative elements to a web page. They are easy to create but can be painful later if not done properly.

In this guide, we'll learn how to create a box in HTML with very less CSS codes. We will start from the fundamental building blocks of the <div> element and then, learn how to style that box.

In this whole process, we also explore various box styling techniques, spacing and positioning tricks, and even responsive design.

So, let's begin creating our box in HTML.

HTML <div> tag

In HTML, it is very easy to create a box component with a simple <div>...</div> tag. Div tags are used for various purposes like grouping contents, parent tags of other children tags... etc.

Also, it is a very good idea to use <div> tag to create a box on the web page. The reason is that developers generally don't style the single <div> and also, it is not advisable to do.

Here is a basic code of the div element.

<div>
  <!-- content here -->
</div>

How to create a Box in HTML?

We are going to use <div> tag for creating a box.

Since it is not advisable to select the whole div tag and apply CSS to it.

It is better to idea to give it a special identifier like a class selector using class="box" or id="box" if it is a very specific element.

Here is the HTML code for the Box element:

<div class="box">
  <!-- content here -->
</div>

The above HTML code should be placed in a .html file where we need to add a Box.

Now, let's select this particular HTML tag with a class box. In CSS, .box is used to select a tag with a class name of box and #box to select a tag with id="box". box is used only as a reference here, you can use other names too!

Here, we have used the class name for the box named box.

.box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

We need to put this CSS code in our CSS file linked with the above html file.

Output of above:

Quickly, let's understand the CSS used in .box to modify it easily.

• width: 200px; - deals with the width of the box

• height: 200px; - deals with the height of the box

• background-color: #f2f2f2; - specifies the background colour of the box

• border: 1px solid #ccc; - creates border size & colour of the box

• border-radius: 5px; - makes rounded corner

• padding: 20px; - handle spacing inside of the box

You can also create the same box using inline CSS instead of an external CSS file.

<div
  style="width: 200px; height: 200px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px; padding: 20px;"
>
  <!-- content here -->
</div>

With this, you now can create a Box in HTML.

Spacing and positioning of the Box

This is an extra section where we will discuss some additional features to better beautify the box and content inside it.

1. Content in the Middle of the Box

To center your content in the box, there are multiple ways to do it. Some of the best and safest options are: use of flexbox or grid.

Just replace the above CSS code of .box with the new one.

.box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}

Final note:

You've made it to the end of this tutorial on how to create a Box in HTML.

You learnt about HTML structure & elements like <div>, CSS styling, and techniques to center the content of the box.

You have now the knowledge and skills to create your boxes in HTML with a little bit of CSS. You can also copy the codes above and use them as your code.

As we all know, web design is ever-evolving art form. So, keep exploring and experimenting with different different designs, styles & preferences.

Happy coding!