CSS box model
The CSS box model is a collection of properties that define the amount of
space around an element, its dimensions, its margins, its borders, and padding
between the content of the element and the borders.
Content: This is the actual content of the HTML element, such as
text, images, or other media.
Padding: The padding is the space between the content and the
element's border. It provides internal spacing within the element.
Border: The border is a line that surrounds the padding and content.
It is the boundary between the element's padding and margin
Margin: The margin is the space outside the border of the element.
Code :-
<html>
<head>
<title> box model example</title>
<style>
div {
background-color: lightgrey;
border: 15px solid red;
padding:
70px; margin:
90px;
}
</style>
</head>
<body>
<div> Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Properties of css margin
margin-top
margin-right
margin-bottom
margin-left
code :
<html>
<head>
<title> margin example </title>
<style>
div {
border: 1px solid
black; margin-top:
100px; margin-bottom:
50px; margin-right:
150px; margin-left:
80px;
background-color: yellow;
}
</style>
</head>
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged..</div>
</body>
</html>
Shorthand property of margins:
Box model shorthand properties are always specified in a clockwise order,
from the
top, right, bottom, and left.
For example: margin: 70px 100px 50px 100px; (margin: top, right,
bottom,left) Means top margin=70px, right margin=100px and bottom
margin=50px and left margin=100px.
margin: 70px 100px; (margin: top and bottom, right and left).
margin: 70px; (sets all four sides of an element’s margin to the same value
i.e 70 px).
margin: 25px 50px 75px;(top , right &left , bottom)
Padding
Padding is the space between the content of an element and its borders.
Code:-
<html>
<head>
<title>padding example</title>
<style>
div {
border: 1px solid red;
background-color: lblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Patna</h2>
<div> Patna is an ancient city that sprawls along the south bank of
the Ganges River in Bihar, northeast India. The state capital, it’s
home to Bihar Museum, a contemporary landmark exhibiting bronze
sculptures and old coins from the region. </div>
</body>
</html>
Shorthand property of padding:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
Borders
Borders appear between the margin and padding in the box
model. Borders put linesaround boxes.
The border-style property specifies what kind of border to display.
The following values are allowed:
Dotted, dashed ,solid , double, hidden , none, groove , ridge
The border-width property can have from one to four values (for the
top border, right border, bottom border, and the left border).
Code:-
.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
