How to make a box in HTML?

When working with HTML and CSS, we always get stuck and wonder how to make a box in HTML. If you don’t know how to make one, we have you covered. This guide will converse about how to create a box in HTML.

You can choose the standard box model or the alternative box model to create boxes in HTML. The default one is the standard box model, but most developers prefer the alternative one.

HTML has many applications and is the base for web development. Moreover, to make your websites intuitive, you can incorporate an HTML sidebar menu or a simple footer using HTML. Moving on, we will discuss these models in detail in the upcoming sections of this guide, making it easier for you to create boxes in the future with the help of HTML and CSS.

How to make a box in HTML? Complete Guide

This section will converse about how to make a box in HTML. 

Explanation of the box model concept.

The box model concept is one of the key concepts that every developer starts with. When working with CSS, we must understand that everything has a box on all sides. It allows us to make complicated layouts or position elements with other elements.

You should have prior knowledge of HTML and CSS to understand this topic.

Block and inline boxes distinction

There are various kinds of boxes in CSS. These are divided into block boxes and inline boxes. The type of box you use refers to how it reacts regarding page flow concerning other boxes on the page.Boxes also come with a display property, which can have several values.

There are two display types, Outer and inner, which we will discuss in the next section of this guide. 

Outer and inner display types.

We will now discuss both the display types in this section. 

Outer Display Types

Suppose we have a box that has an outer display type of block. Then:

• The box will break upon the new line.
• Properties of width and height will be applied.
• Properties like padding, margin, and border will push away other elements from the box.
• If the width is not mentioned, it will widen in the inline direction to fill the area present in the container. 

Suppose we have a box that has an outer display type of inline. Then:

• The box will not break upon the new line.
• Properties of width and height will not be used.
• Properties like padding, margin, and border (top and bottom only) will not push away other inline boxes from the box.
• Properties like padding, margin, and border (left and right only) will push away other inline boxes from the box.

Inner Display Types

You can also use the inner display types for boxes, instructing how elements within that box are organized. For example, if you use display: flex; the outer display type will be blocked, but the inner display type will be changed to flex. Any direct branch of this box will transform into flex items and will react according to flexbox parameters.

The CSS Box Model

The CSS box model is one of the key concepts every developer should know. This box model is only relevant to block boxes and states how the various parts of the box, like margin, border, padding, and content, work together to make a box shown on a page.

There are two types of box models, the standard box model and the alternative box model, which we will discuss in the later sections of this guide. Furthermore, some of the reactions stated in the box model are also used by inline boxes. 

Parts of a box

Let’s discuss the parts of a box:

• Content Box- This is the region where your content is shown. You can alter its size using properties like inline-size and block-size or width and height.

• Padding Box- It is the white space that wraps around the content. You can alter its size using properties like padding.

• Border Box- It is the box that is around the content and padding. You can alter its size by using properties like borders.

• Margin Box– The whitespace around the content, padding, and border is the box’s external layer. You can alter its size using properties like margin.

Standard CSS box model vs. alternative CSS box model. 

In this section, we will delve deep into the Standard CSS box model and alternative CSS box model.  

The standard CSS box model is the default model used by browsers. In this model, you must use the width and height properties or inline size and block-size to change the content box size. You can also add the padding and margin properties, which will constitute the total size of the box. For instance, let’s see an example: 

.box {

  width: 300px;

  height: 150px;

  margin: 15px;

  padding: 20px;

  border: 10px solid black;

}

The total space taken up by the box will be 360 wide( 300+20+20+10+10) and 210 high(150+20+20+10+10). Furthermore, we must remember that the margin is not considered in the box size, as the content box stops at the border box. 

Now, let’s discuss the alternative box model. To incorporate this model, you have to set box-sizing: border-box. For instance:

.box {

  box-sizing: border-box;

}

The width of the displayed box on a page is any width. Meanwhile, the width of the content region is the former width subtracted by the padding and border width. You don’t have to include the border and padding to get the box size. Suppose we have the same above code; then the actual size of the box will be 300px in the inline direction and 150px in the block direction. 

Playing with Box Models

Let’s understand the models with a question so that it is understandable. Suppose we have two boxes; one is the standard box model, and the other is the alternative box model. The HTML code will be: 

<div class=”box”>We utilize the standard box model.</div>

<div class=”box alternate”>You utilize the alternate box model.</div>

Furthermore, let’s look at the CSS code:

.box {

  border: 5px solid Rebecca purple;

  background-color: lightgray;

  padding: 40px;

  margin: 40px;

  width: 300px;

  height: 150px;

}

.alternate {

  box-sizing: border-box;

}

What should be added to the .alternate class so it is the same size as the standard box model?

Solution:

In the alternate class, you should add:

.alternate {

  box-sizing: border-box;

  width: 390px;

  height: 240px;

}

 

The height and width values also include the value of padding and border. 

Using browser DevTools to view the box model.

The best way to understand about box models is to use your browser. Whenever you are on a page, you can open the DevTools of the browser and select inspect elements, giving you the box model of the selected element with the values written in it. It is available in all browsers.

See Also: How To Convert Pug To HTML? Top 5 Best Converters

Margins, Padding, and Borders

We have already discussed margins, padding, and borders in the earlier sections of this blog. This section will discuss their advanced properties and how we can use them effectively. Margins, Padding, and Borders are essential to learn to make a box in HTML.

Margin and Margin Collapsing

As discussed earlier, the margin is the whitespace around the content, padding, and border, known as the box’s external layer. Moreover, you can set the values of margins as positive and negative. But, if you put the value as unfavorable, the box can overlap with the other elements present on the page.

Furthermore, you must use margin only when the size of the displayed box is added, regardless of the box model you are using. Some of the advanced properties of margins are:

• margin-top
• margin-right
• margin-bottom
• margin-left.

Now, let’s talk about margin collapsing. Suppose two margins touch each other, and their values can be positive or negative. The results may vary, for instance: 

• If we are presented with two positive margins, they will blend into one, and their size will be the same as the most significant independent margin.

• If we are presented with two negative margins, they will not blend into one and eventually collapse. Therefore, the size will be the smallest value.

•  The value will be subtracted if presented with one positive and one negative margin.

Borders

It is the box that is around the content and padding. You can alter its size by using properties like borders. The kind of model that you are using also affects the border. For example, if you are working on a standard box model, the value is included in the width and height of the content box. On the other hand, if you are working on an alternative box model, the more the border value, the less the content box area, as the border consumes some of the present width and height of the box. 

There are four types of advanced properties of borders:

• border-top
• border-right
• border-bottom
• border-left.

Additionally, you can also utilize some additional properties with the above. For instance: 

• border-width
• border-style
• border-color.

Furthermore, if you combine the above properties, you can make more properties. For instance: 

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

Padding

It is the white space that wraps around the content box. You cannot use negative values in padding. Furthermore, any background applied to the element will be shown at the back of the padding. Some of the advanced properties of padding are: 

• padding-top
• padding-right
• padding-bottom
• padding-left.

The Box Model and Inline Boxes.

Whatever we have discussed so far is only applied to block boxes. Let’s understand some of the functions of the box model that are used to inline boxes. Suppose we have an inline box made by the <span> element.

Let’s understand through an example. Look at the following HTML code:

<p>

  I am a paragraph, and this is a <span class=”unique-span”>span</span> within that paragraph. A span is an inline element that does not go hand in hand with width and height.

</p>

Now, add the following CSS:

.unique-span {

    margin: 20px;

    padding: 20px;

    width: 80px;

    height: 50px;

    background-color: lightblue;

    border: 2px solid blue;

}

When you run this code, you will see we have used a span element within a paragraph. The width, height, margin, and borders are also used. Furthermore, we can see that the margin, padding, and border (top and bottom only) are applied, but it does not alter the relationship of other content in our inline box. On the other hand, left and bottom margins, borders, and padding push the content away. The main problem is that the padding and borders coincide with the different words. To fix this problem, we will use the display inline-block, which will be discussed in the next section. 

Using display: inline-block

Display: inline-block is a unique attribute that offers a middle ground between inline and block. You can use this attribute to solve the problem we faced above. For instance, if you use it, the element will not break upon a new line and will respect the width and height.

The features of the display: inline-block are as follows:

• Properties of width and height will be applied.
• Properties like padding, margin, and border will push away other elements from the box.

When you add display: inline-block, you will see the margin and padding are not overlaying over the words. The CSS will be:

.unique-span {

    margin: 20px;

    padding: 20px;

    width: 80px;

    height: 50px;

    background-color: lightblue;

    border: 2px solid blue;

    display: inline-block; 

}

You can also experiment with the display type to understand the concept better.

Examples of Different Display Types

Let’s look at the following HTML and CSS code: 

HTML:

<p class=”unique-paragraph”>I am a paragraph. A short one.</p>

<ul class=”unique-list”>

  <li class=”unique-item”>Item One</li>

  <li class=”unique-item”>Item Two</li>

  <li class=”unique-item”>Item Three</li>

</ul>

<p class=”unique-paragraph”>I am another paragraph. Some of the <span class=”unique-block”>words</span> have been wrapped in a <span class=”unique-span”>span element</span>.</p>

CSS:

.unique-paragraph,

  .unique-list {

    border: 2px solid rebeccapurple;

    padding: .5em;

  }

  .unique-block,

  .unique-item {

    border: 2px solid blue;

    padding: .5em;

  }

  .unique-list {

    display: flex;

    list-style: none;

  }

  .unique-block {

    display: block;

  }

In this example, we have three dissimilar elements. All of them have the outer display type: block. Firstly, we have a paragraph with a border. The browser will look at it as a block box. It commences on a new line and widens the entire present width. Secondly, we have a list that uses display: flex and behaves like a block box- like the first one. Thirdly, we have two <span> tags within a block-level paragraph. 

Now, let’s discuss how inline elements react in the following example. Look at the following HTML and CSS:

HTML:

<p>

  I am a paragraph. Some of the

  <span class=”unique-span”>words</span> have been wrapped in a

  <span class=”unique-span”>span element</span>.

</p>

<ul class=”unique-list”>

  <li class=”unique-item”>Item One</li>

  <li class=”unique-item”>Item Two</li>

  <li class=”unique-item”>Item Three</li>

</ul>

<p class=”unique-inline”>I am a paragraph. A short one.</p>

<p class=”unique-inline”>I am another paragraph. Also, a short one.</p>

CSS:

.unique-paragraph,

  .unique-list {

    border: 2px solid rebeccapurple;

  }

  .unique-span,

  .unique-item {

    border: 2px solid blue;

  }

  .unique-list {

    display: inline-flex;

    list-style: none;

    padding: 0;

  }

  .unique-inline {

    display: inline;

  }

In this example, we first have a <span> tag in the first para, which is inline. Secondly, a <ul> tag uses display: inline-flex, making an inline box comprising flex items. Thirdly, both the paragraphs use display: inline

FAQs

How Do You Insert A Box In HTML?

To insert a box in HTML, you must use the div tag to make a container for HTML elements. Furthermore, you can style it with the help of various CSS properties.

How To Create A Text Box In HTML?

To create a text box in HTML, you have to use input type=text, which will make a text input field where you can type and text.

How To Insert Text In HTML?

You can use the ins tag, which states a text has been incorporated into the document.

How To Create A Table In HTML?

You use the table tag to create a table in HTML. Furthermore, while using the table tag, you also have to utilize the tr(for rows), th(for table heading), and td(for table data) to create a table successfully. In addition, you can create table borders without CSS, too.

Conclusion

In conclusion, we learned how to make a box in HTML. You can create boxes easily by using any of the two CSS models. It would help to experiment with the display types to understand how the boxes react and what looks best for you. Furthermore, style your boxes with CSS like margins, borders, and margins. In addition, try to use the browsers to understand the box model in depth with the help of its DevTools. Now that you know about boxes, you can learn how to add a text box in HTML or use a comment box in HTML and position them according to your needs.  

See Also: How To Open HTML Files On IPhone?

Visit: HTML