បើសិនជាយើងចង់អោយមានគំលាតរវាង element ណាមួយ ជាមួយនឹង element ដទៃទៀត យើងត្រូវប្រើប្រាស់ property margin ដែលចែកចេញជា property មួយចំនួនទៀត មានដូចជា margin-top, margin-bottom, margin-right, margin-left ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
Using individual margin properties
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
</body>
</html>
Using individual margin properties
ជារួម នៅក្នុងការអនុវត្ត យើងអាចប្រើប្រាស់តែ property margin តែមួយក្នុងកំណត់គំលាតនៅគ្រប់ជ្រុងទាំងអស់របស់ element ទាំងឡាយ ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
The margin shorthand property - 4 values
This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
<hr/>
</body>
</html>
The margin shorthand property - 4 values
យ៉ាងណាម៉ិញ បើសិនចង់កំណត់គំលាតរវាងជ្រុងខាងលើ ជ្រុងខាងស្តាំនិងឆ្វេង និងជ្រុងខាងក្រោម យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
The margin shorthand property - 3 values
This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.
<hr/>
</body>
</html>
The margin shorthand property - 3 values
បើសិនជាយើងចង់កំណត់គំលាតរវាងជ្រុងខាងលើនិងខាងក្រោមរបស់ element អោយមានប្រវែងស្មើគ្នា និងជ្រុងខាងឆ្វេងនិងខាងស្តាំ អោយមានប្រវែងស្មើគ្នា យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
The margin shorthand property - 2 values
This div element has a top and bottom margin of 25px, and a right and left margin of 50px.
<hr/>
</body>
</html>
The margin shorthand property - 2 values
ហើយបើយើងចង់មានគំលាតស្មើគ្នានៅគ្រប់ជ្រុងទាំងអស់របស់ element យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
The margin shorthand property - 1 value
This div element has a top, bottom, left, and right margin of 25px.
<hr/>
</body>
</html>
The margin shorthand property - 1 value
លើសពីនេះទៀត ក្នុងករណីដែល element មានប្រវែងកំណត់ណាមួយ យើងអាចកំណត់តំលៃរបស់ property margin ជា auto បាន។ ក្នុងករណីនេះ element នឹងត្រូវស្ថិតចំកណ្តាល element មេរបស់វា។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Margin Property</title>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
Use of margin:auto
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
This div will be horizontally centered because it has margin: auto;
</body>
</html>
Use of margin:auto
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
