Layout with the Box Model
Different types of box models can be designed and created using CSS scripting in HTML web pages. Where you will be able to create simple responsive and flex box model items in many different box models using CSS. In which you will be able to modify the inbuilt box model attributes and controls in the created box model. For example, you can custom apply and modify box model content, box padding, box border, box model margin, box model internal external border and default box margin settings.
Components of the default box model in CSS.
- Box model content – Represents real data and information inside a user created box model, such as text, images, box digital content and other digital web elements.
- Box model padding – The empty space inside the digital web page display content and box model border in the web page, which separates the content and border.
- Box model border – In a web page, the box model border is the padding and display border around the web content, which is displayed by custom editing.
- Box model margin – In the current web page, the digital content has the external space of the border, which separates the web elements from each other with a box model and displays them aligned by proper margin.
Uses and Methods of Box Model in CSS.
So let’s learn some basic methods and create and control custom box model element.
Aligning box model element centered.
Center aligning a block model element using box model margin attributes.
.boxmodel-center{
width: 400px;
margin: 0 auto; /* margin with 0 align box element in centred with left and right position */
padding: 30px;
border: 3px solid blue;
}
Create a box model with padding and border in CSS.
.style-boxmodel {
width: 340px;
padding: 20px;
border: 7px solid red; /* display box model red border */
margin: 20px; /* add 20px Space among boxes model */
background-color: aqua; /* display aqua background color*/
}
Creating the CSS box model with responsive layouts.
.responsive-boxmodel {
width: 100%; /* display box model full width */
max-width: 700px; /* display max width 700px */
padding: 20px;
border: 2px solid blue;
margin: 30px auto; /* display 30px auto margin */
}
Stacking box model elements with margins in CSS.
.boxmodel-vertical-stack {
margin-bottom: 30px; /* display space among box stack element */
}
Flexbox layout model in CSS.
Creating box model with flexbox layout in CSS, in which flexbox model margin and padding spacing can be custom edited.
.flexbox-container {
display: flex;
justify-content: space-between; /* add space among flexbox item */
padding: 20px;
}
.flexbox-items {
width: 40%; /* display with Each item with 40% of the container element */
padding: 20px;
border: 2px solid brown;
margin: 10px; /* add space among items */
}
So let’s understand different box model method examples using CSS in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Multiple Css Box Model Layout Script Code </title>
<style>
body {
color:brown;
font-family: times new roman;
margin: 0;
padding: 0;
}
.boxmodel-centered {
width: 400px;
margin: 30px auto; /* display center the box model */
padding: 30px;
border: 3px solid aqua;
background-color: yellow;
}
.boxmodel-styled {
color:white;
width: 290px;
padding: 30px;
border: 10px solid orange;
margin: 20px; /* display 20px space among element */
background-color: teal;
}
.boxmodel-responsive {
text-align: center;
font-family: monotype corsiva;
font-size: 1.5em;
width: 100%; /* display fill box model width */
max-width: 800px; /* display box Maximum width */
padding: 20px;
border: 4px solid green;
margin: 30px auto; /* display box margin auto margins */
}
.flexbox-container {
display: flex;
justify-content: space-between; /* display space among flexbox element */
padding: 30px;
border: 3px solid red;
}
.flexbox-element {
width: 40%; /* display flexbox element 40% of the flexbox model */
padding: 20px;
border: 2px solid orange;
margin: 10px; /* display space among flexbox model element */
}
</style>
</head>
<body>
<h3 style align=”center”>Display The Centred Box Model Example</h3>
<div class=”boxmodel-centered”>
This Is The Demonstration of Simple Box Model With Centred Box Element
</div>
<h3 style align=”center”>Display The Style Box Model Example</h3>
<div class=”boxmodel-styled”>
This Is The Demonstration of Box Model Styles With Default Box Element
</div>
<h3 style align=”center”>Display The Responsive Box Model Example</h3>
<div class=”boxmodel-responsive”>
This Is The Demonstration of Responsive Box Model Styles With Default Box Element
</div>
<h3 style align=”center”>Display The Flexbox Container Element</h3>
<div class=”flexbox-container”>
<div class=”flexbox-element”>Css</div>
<div class=”flexbox-element”>Html</div>
<div class=”flexbox-element”>Javascript</div>
<div class=”flexbox-element”>Php</div>
<div class=”flexbox-element”>Asp.net</div>
<div class=”flexbox-element”>Bootstrap</div>
</div>
</body>
</html>
Box Model Detail Explanation.
- Box Model Content – Content in box model is the digital content element displayed in the box model, which can be in the form of text, image, code or other box content.
- Box Model Padding – Empty space between the text and box model border in the created box model. This design displays empty space between text and box model in the box model.
- Box Model Border – Displays a border around the box model element.
- Box Model Margin – Used to create empty spacing between design box model elements, which helps you to customize box model layout.
