Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use margin, border and padding to fit together in the box model?
In general, we use the box model to define all these properties to use them together. Box model is a model that is used to define the different CSS properties that a box contains like the margin, border, padding and the most important content. A box model in CSS generally defines the properties like margin, border, padding and the content.
Before understanding how to use padding, margin, border and content to fit together in a box model. Let us understand what these properties actually does when they applied on a container.
Content − The content is the most important and a must have property for a container. It defines what message the particular text container wants to deliver or purpose of the container.
Padding − Padding is the space around the text of the content inside the container. It can also be said that it is the inner space that between the content and the boundaries of the container.
Syntax
Below syntax will show you the use of the padding property with shorthand and specific property −
// Shorthand property // sets the space around the all four sides of the content padding: value; // specific properties // sets specified space on the specified side of the content padding-top/left/right/bottom: value;
Border − Border, as the name suggests that it is the outline around the boundaries of the container to specify the area contained by a particular container on the web page.
Below syntax will show how to use the border property −
// Shorthand property // specifies border on all four sides with given width, style and color border: width style color; // specific properties // specifies border on the specified side of the container border-top/left/right/bottom: width; border-style: value; border-color: value;
Margin − Margin is also used for giving the space just like padding. There is a difference between the margin and padding that the padding is the space between the boundaries and the content while margin is the space outside the container that specifies the gap between the two adjacent containers.
Below syntax will show the use of the margin property −
// Shorthand property // sets the space around the all four sides of the container margin: value; // specific properties // sets specified space on the specified side of the container margin-top/left/right/bottom: value;
Let us now understand and apply these properties on a particular element and see them in the box model how they work.
Example
The below example will explain how you can fit the margin, padding, border and the content properties together to fit in a box model −
<!DOCTYPE html>
<html>
<head>
<style>
.box-model{
padding: 50px;
border: 2px solid green;
margin: 50px;
}
</style>
</head>
<body>
<center>
<h2> Using margin, border and padding to fit together in the box model </h2>
<p> The changes in the below text will be visible once the box model properties applied on it. </p>
<p class = "box-model">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
</center>
</body>
</html>
In the above example, we have used the Content, Padding, Margin and Border together to fit inside a box. You can see the difference between the container’s look once you remove the padding and margin from its styles and when it contains those styles.
Let us see one more code example, in which we will use two different containers with different content and separate them by giving particular margin and padding on particular sides.
The algorithm of the above example and this example is almost same. You just need to add one more content container with a different class to apply different styles on it that the first container.
Example
The example below will illustrate the use of the box model properties to differentiate two containers with different content −
<!DOCTYPE html>
<html>
<head>
<style>
.box-model1{
border: 2px solid green;
padding: 30px;
margin-bottom: 30px;
}
.box-model2{
border: 2px solid red;
padding: 30px;
margin-top: 30px;
}
</style>
</head>
<body>
<center>
<h2> Using margin, border and padding to fit together in the box model </h2>
<p> The changes in the below text will be visible once the box model properties applied on it. </p>
<p class = "box-model1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p class = "box-model2"> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</center>
</body>
</html>
In this example, we have defined two different containers with different content in them and used the box model properties margin and padding to differentiate them. We have given the same margin-bottom to above and margin-top to the bottom container. Which result in a double space of the same value between them.
In this article, we have learned about how we can use the margin, padding, border and content property together inside a box model. We have seen the practical implementation of these properties with the help of two code examples in different scenarios to understand them properly.
86 Views
