Css Box Model !
This blog will briefly explain aspects related to the CSS Box Model
Every HTML element is treated as a box by CSS . What this means is that whenever we try to manipulate the style of any HTML element more often than not we are changing the properties of it's adjoined box(though there are some properties which don't have anything to so with the box at all. )
Components of CSS Box Model
The CSS box model is basically based on 4 components :
1. Content
2. Padding
3. Border
4. Margin
1. Content
It is basically anything that you see on the screen . It may be text or image or a video for that matter . It is the actually the information part of any Web page that the user needs visits the web page for.
2. Border
It defines the boundary of the content. Anything visible outside border is another HTML element.
3. Padding
Talking in terms of hierarchy , padding is the second member of CSS box model coming after the content or in other words "covering it" . It occupies the space between content and border.
4. Margin
Margin is the space between different elements . It plays a vital role in the positioning of different elements and has a major effect on the outlook of the web page. The two pictures denote elements with and without margin. Check the difference for yourself!
Styling with CSS
All of the properties mentioned above can be manupilated with help of CSS . Changing the properties changes the appearance of the box which reflects as a change on the content. Most of the styling in a web page is based on the CSS box model , it gives your web page the kind of shape and size you want your web page to be in . We can change the padding , border , margin of any specific box element.
Changing Padding
Analyse the two codes below :
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 10px;
border: 1px solid #4CAF50;
background-color : green;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 10px.</div>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 10px;
border: 1px solid #4CAF50;
background-color : green;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>
</body>
</html>
Output
Changing Margin
Analyse the code
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-width: 20px;
}
div {
border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<h1>This element has a border of 20px</h1>
<div>Thia element has a border of 5px</div>
</body>
</html>
Output
Changing Margin
Analyse the codes bellow :
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div>This element has a margin of 70px.</div>
<h3> refrence text </h3>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 30px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div>This element has a margin of 70px.</div>
<h3> refrence text </h3>
</body>
</html>
Output
. Some extra info:
In the above examples we changed the dimensions of different components in terms of pixels . We can use other sizing parameters to do . I have listed them below :