Thuộc tính margin-top
Thuộc tính margin-top : canh lề bên trên cho thành phần.
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<p>margin top</p>
</div>
</body>
</html>
margin top
Thuộc tính margin-right
Thuộc tính margin-right : canh lề bên phải cho thành phần.
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p>margin right</p>
</div>
</body>
</html>
margin right
Thuộc tính margin-bottom
Thuộc tính margin-bottom : canh lề bên dưới cho thành phần.
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<p>margin bottom</p>
</div>
</body>
</html>
margin bottom
Thuộc tính margin-left
Thuộc tính margin-left : canh lề bên trái cho thành phần.
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin-left: 10px;
}
</style>
</head>
<body>
<div>
<p>margin left</p>
</div>
</body>
</html>
margin left
Thuộc tính margin
Thuộc tính margin : canh lề cho thành phần, tổng hợp các thuộc tính margin-top, margin-right, margin-bottom, margin-left.
margin với giá trị 1 thành phần
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin: 10px;
}
</style>
</head>
<body>
<div>
<p>margin 1 thành phần</p>
</div>
</body>
</html>
margin 1 thành phần
Trong đó:
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin với giá trị 2 thành phần
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin: 10px 5px;
}
</style>
</head>
<body>
<div>
<p>margin 2 thành phần</p>
</div>
</body>
</html>
margin 2 thành phần
Trong đó:
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
margin với giá trị 3 thành phần
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin: 5px 10px 0;
}
</style>
</head>
<body>
<div>
<p>margin 3 thành phần</p>
</div>
</body>
</html>
margin 3 thành phần
Trong đó:
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
margin với giá trị 4 thành phần
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
}
p {
background: #00CC00;
margin: 5px 10px 10px 20px;
}
</style>
</head>
<body>
<div>
<p>margin 4 thành phần</p>
</div>
</body>
</html>
margin 4 thành phần
Trong đó:
margin-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 20px;