Margin and Padding
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
background-color: aqua;
width: 300px;
height: 300px;
float: left;
margin-left: 100px;
}
#div2{
background-color: blueviolet;
width: 300px;
height: 300px;
float: left;
/* margin: 20px; */
margin-right: 20%;
margin-left: 30px;
}
#div3{
background-color: blanchedalmond;
width: 300px;
height: 300px;
float: left;
padding: 20px;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.img1{
width: 100px;height: 100px;
}
div{border: 2px solid red;}
</style>
</head>
<body>
<div id="div1">
<p>
This dummy text will wrap around the the floating
image above to left or right. To now how float left,
</p> right and none works,
<input type="text">
<header>Header</header>
please choose options above. This example will help you understand how
CSS float
left and right
left and right works. Float left will float image to left of parent and
float right wileft and right works. Float left will float image to left
of parent and float right wi
left and right works. Float left will float image to left of parent and
float right wi
left and right works. Float left will float image to left of parent and
right wi works. Float left will float image to left of parent and
float right will float image to right of parent element. After float, next
element, i.e. text in paragraph will wrap around image.
</div>
<div id="div2">
please choose options above. This example will help you understand how
CSS float
left and right
left and right works. Float left will float image to left of parent and
float right wileft and right works. Float left will float image to left
of parent and float right wi
left and right works. Float left will float image to left of parent and
float right wi
left and right works. Float left will float image to left of parent and
right wi works. Float left will float image to left of parent and
float right will float image to right of parent element. After float, next
element, i.e. text in paragraph will wrap around image.
parent and float right will float image to right of parent element.
After float, next element, i.e. text in paragraph will wrap around image.
</div>
<h1>Overflow scroll</h1>
<div id="div3">
CSS float
left and right
left and right works. Float left will float image to left of parent and
float right wileft and right works. Float left will float image to left
of parent and float right wi
left and right works. Float left will float image to left of parent and
float right wi
left and right works. Float left will float image to left of parent and
right wi works. Float left will float image to left of parent and
float right will float image to right of parent element. After float, next
element, i.e. text in paragraph will wrap around image.
parent and float right will float image to right of parent element.
After float, next element, i.e. text in paragraph will wrap around image
After float, next element, i.e. text in paragraph will wrap around image.
</div>
</body>
</html>