Introduction to CSS Box Model

Cascading Style Sheet provides the styling HTML elements. But, for styling an element, we must know about HTML elements and their behavior as far as CSS is considered. One of the most important parts of designing a web page is deciding upon the layout. If the placements of elements on the page are properly planned, it can be made dynamic and responsive. The presentation of the page depends upon how the elements have been rendered. In plain HTML, if we use different elements, they are rendered one after the other in a queue form. However, CSS gives us an option to customize that part of the display, which is what this article will talk in details about. This property of CSS is called the Box Model. Each element can be equated to a box and CSS lets the developer decide various parameters of this box to customize the rendering of each element and create the overall layout of the page.

Box Model Elements and Syntax

There are majorly four elements in a box-model on which the behavior of the box (element) relies. These are:

• Content: This is the main content of the element. It can be text, links, images, videos or any other content.
• Padding: This is the gap between the content and the border (which is another element) of the content.
• Border: This can be visualized as a solid boundary of the content of the element.
• Margin: This is the space that is maintained between various boxes on a particular page i.e. the space between two borders.

Syntax

element_name{
height:;
width:;
border:;
padding: ;
margin:;
}

The diagrammatic representation of the box-model is:

Examples to Implement in CSS Box Model

Let us now have a look at some basic examples to see how the box-model works in CSS:

1. Designing the Box-Model for a single element.

• For this example, we will take the External CSS method of styling a page. SO, first of all, we will create a CSS file.
• We will write the box-model styling for the heading element i.e.

  . We will define the elements such as padding, margin and border. We can add additional features like background-color, font-size, font-style, etc according to the requirement. The CSS file should look like this:

Code:

h2{
height: 100px;
width: 100px;
font-size: 20px;
padding: 100px;;
border: 10px double blueviolet;
margin: 10px;
background-color: lightcoral;
}

• Next, we will create an HTML page. Since we are using external CSS, we will primarily call the CSS file in the HTML page.
• We will use the heading element

  such that the layout that is styled in the CSS file can be demonstrated. The HTML code should be something similar to this:

Code:









This is test for Box Model for Heading element

• Saving the HTML file and opening it through a browser will give the output. It should be similar to the screenshot:

2. Designing layout for multiple elements on a page.

• We will be using the External CSS approach for this example as well. Hence we will create a CSS file.
• We will write the layout style for the heading element

  . We will fix the text properties also. The styling code for

  should be similar to this snippet of code:

Code:

h2{
width: 500px;
font-size: 20px;
padding: 20px 50px;
border: 10px double blueviolet;
margin: 10px 50px;
background-color: lightcoral;
text-align: center;
}

• Next, we will write a similar layout style for paragraph element i.e.

  . the Code should be:

Code:

p{
height: 50px;
width: 700px;
padding: 50px;
border: 15px dotted blueviolet;
margin: 10px 60px;
background-color: lightslategrey;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}

• Combing these two, the final CSS file should look similar to the following code. Please note that more features can be added to these as per the requirement of the page.

Code:

h2{
width: 500px;
font-size: 20px;
padding: 20px 50px;
border: 10px double blueviolet;
margin: 10px 50px;
background-color: lightcoral;
text-align: center;
}
p{
height: 50px;
width: 700px;
padding: 50px;
border: 15px dotted blueviolet;
margin: 10px 60px;
background-color: lightslategrey;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}

• Now that the CSS file is done, we will code the HTML page. Like the previous example, we will first call the external style sheet in the HTML page.
• Now, we will write the code for the page making use of both

  and

  . The coding should be as follows:

Code:









This is test for Box Model for Heading element

• The final output can be observed after saving the HTML file and opening it through a browser. It should be similar to this:

Output:

3. Using box-model as inline CSS with an image as the content.

• Since we are using the inline style CSS for this example, we will style the layout for the paragraph element

  in the HTML code itself. This inline styling code should be as follows:

Code:

• Since we are supposed to use the image as content, we will place an image in the project folder and use the element to call the image within the tags like this:

Code:

• The final HTML page should look like this:

Code:








Output:

• The above examples give a basic idea of how box-model works in CSS. This can be used for deciding how various elements should be spread across the page. Customizing the features and trying out different options for all the parameters will give a broader idea for this.

Recommended Articles

This is a guide to the CSS Box Model. Here we discuss the introduction to the CSS box-model along with respective examples to implement the box model. You can also go through our other related articles to learn more –

1. CSS Inline Style
2. CSS Pagination
3. What is CSS?
4. SUP Tag in HTML

The post CSS Box Model appeared first on EDUCBA.