Margin is the spacing outside an element.
The margin property specifies the size of the margin.
This includes margin for all 4 sides : top , bottom , right , left .
Example
An <input> element with a 50 pixel margin around the element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<input type="text"
placeholder="Your name"
style="margin:50px;" />
</body>
</html>
Output
- margin-top
- margin-bottom
- margin-left
- margin-right
Margin with 4 values
An element with 4 margin values for top, right, bottom, and left sides.
Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<div style="margin: 20px 40px 60px 80px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px 60px 80px;
</div>
</body>
</html>
Output
An element with 3 margin values for top, right, bottom, and left the same as right.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<div style="margin: 20px 40px 60px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px 60px;
</div>
</body>
</html>
Output
Margin with 2 values
An element with 2 margin values for top and bottom, and right and left.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<div style="margin: 20px 40px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px;
</div>
</body>
</html>
Output
Margin with 1 value
An element with 1 margin value for all sides.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<div style="margin: 20px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px;
</div>
</body>
</html>
Output
Margin Values can be negative
A negative margin value moves the element beyond its container.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.margin {
max-width: 600px;
border: 4px solid firebrick;
text-align: center;
padding: 25px;
margin-left: -120px;
}
</style>
</head>
<body>
<div class="margin">
This element has a -120px left margin.
</div>
</body>
</html>
Output
Set Individual sides Margin
Margin values can also be set for each side with these properties:
- margin-top
- margin-right
- margin-bottom
- margin-left
An element with 4 margin properties, one for each side.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<div style="margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element 4 individual margin properties.
</div>
</body>
</html>
Output
No comments:
Post a Comment