margin and padding code example
Example 1: css reset margin padding
* {
margin: 0;
padding: 0;
}
Example 2: margin vs padding
Margin is on the outside of block elements, padding is on the inside.
Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.
Main differences:
- Vertical margins of adjacent items will overlap, padding will not
- Padding is included in the click region and background color/image,
but not the margin
Example 3: react native margin vs padding
padding is the space between the content and the border,
whereas margin is the space outside the border.
Example 4: html box
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.box {
height:5px;
width:5px;
background-color:blue;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
color:blue;
border-width: 15px 15px 15px 15px;
border-color: blue;
border-style: solid;
border-radius: 70%
outline-color: blue;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
</style>
<div class="box">
<h1 style="color:black;position:absolute;font-family:helvetical;font-size:20px;left:20px;bottom:325px;">Your Text</h1>
</div>
</body>
</html>
Example 5: how to make a box in html
<div style="width:500px;height:100px;border:1px solid #000;">This is a rectangle!</div>
Example 6: css padding vs margin