Components: Content, Padding, Border, Margin
Using CSS script style in HTML web page, you can insert and manage text and other page elements in the box model in the web page. Generally, there are 4 main components in the box model in CSS scripting styling. Such as, web page content, box padding, box border, and box margin, attributes etc. Where the box model CSS attributes are used by HTML web developers for effective and responsive web development, HTML web developers use the box model component in HTML web page development.
So, let’s know the box model and its components in HTML web page.
Box model content attributes.
In web development, a particular HTML web page element box model is a reserved place for digital content or object. In which the box model previews the HTML web page element digital content, images, multimedia objects, displayed in the current web page.
Box model content example in basic CSS.
.box-model {
width: 200px;
height: 200px;
padding: 40px; /* it set space among content and border */
border: 4px solid lime; /* display border around the box */
margin: 40px; /* display space outside the box */
background-color: aqua; /* display box model background color */
}
css padding attributes.
In HTML web page, CSS box model padding is the empty space previewed in the padding between the box content information and the box border. Where it creates padding space around the preview content in the existing CSS box model so that the web page is previewed differently and separately from the text box model border.
Box padding model example in basic CSS.
Padding dimension in web page Display box model padding CSS attributes preview digital content in web page by adjusting padding space from top, bottom, left, right.
Box model padding example in basic CSS.
.box-model {
padding: 40px; /* it set space among content and border */
}
In the box model, you can display manual padding attributes for the padding space on all four sides.
.box-model {
padding: 12px 22px 20px 10px; /* it set space among content and border from left, right, top, and bottom */
}
Box model border attributes.
In the design HTML web page, the box model surrounds the border padding and web page content space from all four sides. Where you can use box border attribute and style the width, color and CSS style of the existing web page box in solid border, dash border, dash dotted border, etc. format.
With the box model border dimension, you can manage and control the attributes like border, border-width, border-style and border-color as per the existing content.
Box model border example in basic CSS.
.box-model {
border: 4px solid lime; /* display border around the box */
}
Box model margin attributes.
Margin is the space outside the location boundary of a text element in the current HTML web page. It previews the separation between HTML web page elements, which helps to control and easily manage text spacing in a web page layout.
Box margin dimension attributes are controlled by web page object margin properties, here it previews the margin space around the box model.
Box model margin example in basic CSS.
.box-model {
margin: 40px; /* display space outside the box */
}
HTML web developers can adjust and display different margins on all four sides as per their web page box model margin requirement.
.box-model {
margin: 10px 14px 19px 24px; /* display space outside the box */
}
All box model component examples in css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Box Model Scripting Code </title>
<style>
.box-properties {
color: red;
text-align: center;
font-size: 20px;
width: 170px;
height: 140px;
padding: 40px; /* it set space among content and border */
border: 4px dotted brown; /* display border around the box */
margin: 40px; /* display space outside the box */
background-color: aqua; /* display box model background color */
}
.box-attribute {
color: White;
text-align: center;
font-size: 20px;
width: 200px;
height: 200px;
padding: 10px 10px 10px 10px;; /* it set space among content and border */
border: 4px solid yellow; /* display border around the box */
margin: 10px 14px 19px 24px; /* display space outside the box */
background-color: brown; /* display box model background color */
}
</style>
</head>
<body>
<div class=”box-properties”>
This Is The Other Box Model Class Selector Example Code In Css.
</div>
<div class=”box-attribute”>
You See The Css Box Model With Multiple Content And Other Attributes.
</div>
</body>
</html>
box-model all attributes explanation.
- Box model content – The box model previews text and media object elements.
- Box model padding – The space between the content and the box border in a web page.
- Box model border – The box model padding surrounds the content border in a web page.
- Box model margin – The space outside the web page text and box border, it previews the web element differently from other objects.
