Web dev basics - css (part-3)
Box Model
First we need to understand that in CSS all elements are boxes with content, padding, border and margin.
Here is the initial HTML and CSS we have to demonstrate with examples.
<style>
.box{
width: 200px;
text-align: center;
}
.box-one{
background-color: rgb(192, 79, 79);
}
.box-two{
background-color: rgb(83, 170, 223);
}
</style>
</head>
<body>
<div class="box box-one">One</div>
<div class="box box-two">Two</div>
</body>
Padding, border, margin
let’s add some padding to the first div.
.box-one{
background-color: rgb(192, 79, 79);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
Since the padding is uniform we can use short hand.
if two values it is [top-bottom] [left-right], if only one value that’s for all sides.
As you can see padding adds space between element and border.
Now let’s add a black solid border.
.box-one{
background-color: rgb(192, 79, 79);
padding: 20px;
border: black solid 5px;
}
Now let's add some margin.
.box-one{
background-color: rgb(192, 79, 79);
padding: 20px;
border: black solid 5px;
margin: 30px;
}
As you can see margin adds space outside the borders of the element.
For the time being lets define the height as 200px also making both div elements squares.
.box{
width: 100px;
height: 100px;
font-size: 2rem;
text-align: center;
}
Now if you inspect the element then go to “computed” tab, you can see a diagram for the box model of div One.
Margin collapse
Okay now I copied the styles of box-one into box-two except the background color.
.box-one{
background-color: rgb(192, 79, 79);
padding: 20px;
border: black solid 5px;
margin: 30px;
}
.box-two{
background-color: rgb(83, 170, 223);
padding: 20px;
border: black solid 5px;
margin: 30px;
}
What you will notice is even tho both divs have margin of 30px the gap between them isn’t 30+30 = 60px but only 30px
In box model the margin collapses into one when two elements are next to each other, the larger margin is used incase of different values to be the distance between the elements.
box-sizing: border-box;
You will notice the total size of the box is 150×150 pixel even though height and width is 100px each.
This is because size of element = size of content + padding + border + margin.
Generally tho the margin isn’t considered in the size of the element, what if we do not want to calculate every time the size by adding padding and border, make it simply the width and height specified (trim the content size accordingly)
We do this using border-box
.box-one{
box-sizing: border-box;
background-color: rgb(192, 79, 79);
padding: 20px;
border: black solid 5px;
margin: 30px;
}
That’s all for the box model.
Positioning
Before we get started here is the code we start with to explain with examples.
<style>
body{
font-size: 2rem;
}
.child{
padding: 5px;
}
.parent{
background-color: rgb(34, 131, 234);
padding: 10px;
height: 300px;
}
.child-one{background-color: greenyellow;}
.child-two{background-color: orange;}
.child-three{background-color: pink;}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child child-one">One</div>
<div class="child child-two">Two</div>
<div class="child child-three">Three</div>
</div>
</body>
Static
By default all elements are in position: static; basically following the HTML document for order of elements.
Relative
In relative position you unlock new powers, you can change the top, left, right and bottom of the element.
.child-one{
position: relative;
top: 5px;
left: 15px;
}
As you can see the first div has moved 5px from top and 15px from left relative to the original position. It also overflows the parent.
In relative position the place child-one was previously placed remains empty as if the space is reserved for it.
Absolute
In position absolute it positions itself relative to the parent element that has any position other than static, if not it goes to higher parent, and so on until it reaches body.
.child-one{
position: absolute;
top: 0px;
right: 30px;
}
Since the “parent” element is static it positions itself relative to body. To make it position relative to the “parent” we just need to change parents position to anything other than static.
.parent{
position: relative;
}
.child-one{
position: absolute;
top: 0px;
right: 30px;
}
Also as you will notice unlike relative, here the reserved space for child-one is completely deleted from the document flow.
Fixed
Fixed is similar to absolute but it doesn’t position relative to parent but relative to the entire HTML body.
Another special quirk of fixed elements is they stay at the same place of the screen even if you scroll (absolute don’t move as you scroll since it’s relative to its parent)
.child-one{
position: fixed;
top: 20px;
right: 50%;
}
Sticky
By default it’s relative but as soon as you are at the distance from the top as specified it becomes sticky.
.child-three{
position: sticky;
top: 20px;
}
z-index
<style>
.box{
width: 80px;
height: 80px;
padding: 20px;
text-align: center;
border: 3px solid black;
position: fixed;
}
.box-1{
background-color: aqua;
}
.box-2{
background-color: blueviolet;
top: 50px;
left: 50px;
}
.box-3{
background-color: orange;
top: 35px;
left: 35px;
}
</style>
</head>
<body>
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
</html>
By default whatever is written later in the HTML file has a higher z-index (z axis).
But we can change that using z-index property.
.box-1{z-index: 3;}
.box-2{z-index: 2;}
.box-3{z-index: 1;}
Display
Not covering flex-box and grid.
<style>
div{
background: yellow;
display: block;
}
span{
background-color: aqua;
display: inline;
}
img{
display: inline-block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div><h1>This is a div</h1></div>
<span>this is a span</span>
<img width="100px" src="./263b1540aa497831f943b14146be001a.jpg" alt="">
<span>this is a span</span>
</body>
As you can see
Block
here the div is by default a block level element, it covers the entire width of it’s parent, and pushes the next item to the next line. block items can also be given height and width.
inline
Here spans are by default display inline, they take up the minimum amount space possible to fit the content, also you can have multiple inline elements side by side they do not take the entire width like block.
One thing though, inline elements cannot change their height or width.
inline-block
inline-block elements are same as inline they only take minimum space also other items can be in the same line with them, they can also change their width and height.
none
display: none; acts as if the html element was completely deleted from the document flow.
