- Get link
- Other Apps
padding and margin in css-
Padding -
It is used to make or say create space around inside the content from the border and it create space all side and you want space on specific side then it will create it and for specific side you have to write padding top , padding bottom , padding right or left.
Syntax -
padding: 23px;
padding
Margin -
It is used to make or say create space around outside the content from the border and it create space all side and you want space on specific side then it will create it and for specific side you have to write margin top , margin bottom , margin right or margin left.
syntax -
margin : 22px;
margin
For better understanding see the draw photo -
In this given picture you can understand the basic of padding and margin or you may be after seen this picture you clear your all confusion about padding and margin or if not go below and see the code here you will clear your all doubt about margin and padding.
Code -
<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>padding and margin</title>
<style>
.container1 {
border: 2px solid red;
padding: 23px;
}
.container2 {
border: 2px solid red;
margin: 22px;
}
</style>
</head>
<body>
<p class="container1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
</p>
<p class="container2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
</p>
</body>
</html>
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet
ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
</p>
</body>
</html>
On browser -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere unde magni praesentium, atque cum, amet ipsam est possimus optio dignissimos voluptatibus deserunt maiores totam. Quis similique numquam ipsum quod.
we use these property for making space around it and for more enhance to website this property is very helpful for us in the web development .
Comments
Post a Comment