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:<value>;
width:<value>;
border:<value>;
padding: <value>;
margin:<value>;
}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. <h2>. 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 <h2> such that the layout that is styled in the CSS file can be demonstrated. The HTML code should be something similar to this:
Code:
<html>
<head>
<title>Testing box model</title>
<link rel = "stylesheet" href = "box.css">
</head>
<body>
<h2>This is test for Box Model for Heading element</h2>
</body>
</html>- 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 <h2>. We will fix the text properties also. The styling code for <h2> 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. <p>. 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 <h2> and <p> . The coding should be as follows:
Code:
<html>
<head>
<title>Testing box model</title>
<link rel = "stylesheet" href = "box.css">
</head>
<body>
<h2>This is test for Box Model for Heading element</h2>
<p>Box property test for the paragraph element. The styling is set accordingly.</p>
</body>
</html>- 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 <p> in the HTML code itself. This inline styling code should be as follows:
Code:
<p style="height:400px; width: 200px; padding: 50px 100px; border: 20px double greenyellow; margin: 50px 50px;"></p>- Since we are supposed to use the image as content, we will place an image in the project folder and use the <img /> element to call the image within the <p /> tags like this:
Code:
<p style="height:400px; width: 200px; padding: 50px 100px; border: 20px double greenyellow; margin: 50px 50px;">
<img src='model.png' height="100px" width="200px">
</p>- The final HTML page should look like this:
Code:
<html>
<head>
<title>Inline box-model</title>
</head>
<body>
<p style="height:400px; width: 200px; padding: 50px 100px; border: 20px double greenyellow; margin: 50px 50px;">
<img src='model.png' height="100px" width="200px">
</p>
</body>
</html>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 –
