Table of contents
CSS Display property: Inline, block, inline block
Inline property:- when inline property is applied to an element then the following values are not respected (height/width values, Top and bottom values of margin /padding.
In block and inline-block all the properties are respected (we can set margin/padding/height,width property to the element).
inline-block “- line-break not present in inline-block property.
Display block:- line break is there.
Here, we can change the display property and can check the difference in vs code.
<style>
body{
background-color: aqua;
}
p{
border: 2px solid black;
}
span {
display: inline-block;
font-size: 40px;
border: 2px solid black;
height: 100px;
width: 100px;
padding-bottom: 50px;
/* margin-bottom: 50px; */
}
<body>
<p>this is a <span>cat</span></p>
</body>
</html>
<style>
body{
background-color: aqua;
}
p{
border: 2px solid black;
}
span {
display: inline-block;
font-size: 40px;
border: 2px solid black;
height: 100px;
width: 100px;
padding-bottom: 50px;
/* margin-bottom: 50px; */
}
<body>
<p>this is a <span>cat</span></p>
</body>
</html>
Inline element:- element that are injected inside block level element tag.
inline elements do NOT start on a new line and only takes up as much width as its content. So, if you try to set any width and height, it will have NO effects.
Block element;- Occupy their own space in web page,. that means block elements will occupy the entire width of its parent element.
Inline-block: Displays an element as an inline-level block container. You CAN set height and width values.**
<!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>Position property in CSS layout</title>
</head>
<!-- <style>
body{
background-color: aqua;
}
p{
border: 2px solid black;
height: 150px;
width: 500px;
}
span {
display: inline;
font-size: 40px;
text-align: right;
border: 2px solid black;
height: 100px;
width: 100px;
padding-bottom: 300px;
/* margin-bottom: 500px; */
}
</style> -->
<style>
.container {
height: 1000px;
width: 1000px;
border: 5px solid rgb(184, 33, 171);
border-radius: 5px;
/* display: flex;
flex-direction: row-reverse; */
}
nav{
list-style-type: "\1F44D"; // thumbs up sign;
display: Flex;
}
.position {
display: block;
margin-right: 50px;
margin-top: 25px;
height: 50px;
width: 50px;
border: 2px solid #450ca0;
text-align: center;
}
#Two{
background-color: rgb(146, 146, 15);
position: relative;
left: 50px;
}
</style>
<body>
<nav class="red">
<li class="white">One</li>
<li class="white">Two</li>
<li class="white">Three</li>
<li class="white">Four</li>
</nav>
<div class="container">
<div class="position">One </div>
<div class="position" >Two</div>
<div class="position">Three</div>
<div class="position" id="Two">Four</div>
</div>
</body>
</html>