CSS Box Model
Introduction
Everything in CSS has a box around it and understanding these boxes is the key to designing a more complicated layout with CSS and aligning items with other items
Several types of boxes can fit into two categories, Block boxes and inline box
Boxes have inner display type and outer display type, type refers to the nature of behavior or relation with other boxes in the layout
Block
Outer display type
when the box has an outer display type of block then
The box will break into a new line
Width and height parameters are considered
Padding, border and margin cause the other element to move away from the block
if the width is not specified then, the width of the block will extend in an inline direction to the end of the layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<link rel="stylesheet" href="cssbox.css">
</head>
<body>
<h1>CSS Box model</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti incidunt ex dicta possimus sequi, veniam velit saepe omnis exercitationem similique id animi blanditiis doloremque voluptate suscipit ea quos. Ipsam, fuga?</p>
</body>
</html>
h1{
border: 2px solid black;
background-color: aqua;
}
Inner display type
Boxes also have an inner display type which indicates how elements inside the box are laid out
you can change the inner display type like display: flex or display: grid
the element will still use the outer display type as a box and any direct child of this box will have display items as flex
Inline
Inner display type
when the box has an inner display type of block then
The box element will not move into a new line
Width and height attributes are not valid
vertical padding, border and margin values are considered but will not move element away from the inline box
horizontal padding, border and margin value will move away from inline boxes
<a>, <em>, <span> are some of element which uses inline as display property
Parts of the box
content
The area where content is present like image, text, heading, paragraphs and so on
padding
Padding comes around content as whitespace, value can be set using padding attribute, padding is transparent
Border
Border wraps content and padding, can be adjusted using the border property
margin
it is the outermost layer that wraps the border, padding and content, margin is transparent
h1{
border: 2px solid black;
background-color: aqua;
width: 750px;
height: 150px;
margin: 10px;
padding: 25px;
}
Actual size taken by the box is 804px wide(750+left border: 2px + right border: 2px+left padding: 25px + right padding: 25px) and 204px height(150+top padding:25px + bottom padding: 25px + top and bottom border: 4px)
Alternate Box type
in this type of model, any width is the width of the visible box on the page