Thursday, April 30, 2020

html div margin vs padding

html div margin vs padding

Margin:

Html div margin and padding is most important topic in websites when we create a web  project then margin and padding is mostly use in html stylesheet. Margin help us to make a distance from browser to our web page we use margin for four sides of browser and web page. When we need one side or two sides margin then we can use as margin-top, margin-left, margin-bottom and margin-left and define in pixels use in CSS stylesheet px;

Padding:

Html Padding is use for internal distance. Suppose i write some thing in my div / division then i want to distance between div and paragraph or other typing tags i will use Padding. Padding is work in div in it is this is similar as Margin but margin effects on web browser and padding effects on content. I give an example with my codes.


<!DOCTYPE html>
<html>
<head>
<title>Html div tag</title>
<style type="text/css">
#div1{
background-color: green;
height: 400px;
width: 600px;
margin-top: 20px;
margin-left: 15px;
padding-top: 5px;
padding-left: 15px;
}
</style>
</head>
<body>
<div id="div1">
<p>this is my paragraph tag</p>
</div>
</body>
</html>

                                                                                ⇊⇊

html div margin vs padding


In this coding i use a div id div1 and in div a take a paragraph tag when i style this div margin and padding margin work with web browser and my div's green area get away from browser and when use padding that effects on my <p> Paragraph tag </p> and paragraph space from div when i apply margin-top and margin-left.

This is an example of difference between margin and padding  for more details you can watch my video below.





No comments:

Post a Comment

css class

css class or html class: Class in html and css is a selector. We can define style rules based on the class attribute of the elements. Al...