<!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>Box Model</title>
<style>
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body{
background-color: rgba(191, 193, 179, 55%);
}
.container{
background-color: burlywood;
border: 3px solid rgb(red, green, blue);
/* We can set margin/padding for top, bottom, left and right like this*/
/*padding-top: 79px;
padding-bottom: 79px;
padding-left: 34px;
padding-right: 79px; */
/*padding/= top right bottom left;*/
/* padding: 23px 56px 6px 78px; */
/* padding: y(top/bottom) x(left/right); */
padding: 34px 19px;
margin: 14px 19px;
border-radius: 23px;
width: 533px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<h3>This is my heading </h3>
<p id="First">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
</div>
<div class="container">
<h3>This is my heading </h3>
<p id="Second">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
</div>
<div class="container">
<h3>This is my heading </h3>
<p id="Third">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
</div>
</body>
</html>
No comments:
Post a Comment