padding គឺជា property ប្រើប្រាស់សំរាប់ធ្វើអោយមានគំលាតនៅខាងក្នុង element ទាំងឡាយ។ អាស្រ័យហេតុនេះ ភាពខុសគ្នារវាង margin និង padding គឺត្រង់ថា margin ត្រូវប្រើប្រាស់សំរាប់ធ្វើអោយមានគំលាតរវាងជ្រុងទាំងឡាយ នៅខាងក្រៅ element ចំណែកឯ padding ត្រូវប្រើប្រាស់សំរាប់ធ្វើអោយមានគំលាតនៅខាងក្នុង element ជាមួយនឹងអ្វីៗដែលមាននៅក្នុង element ។ padding ចែកចេញជា property ជាច្រើនតទៅទៀត មានដូចជា pdding-top, padding-bottom, padding-left, padding-right ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Padding Property</title>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
Using individual padding properties
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</body>
</html>
Using individual padding properties
ដូចគ្នានឹង margin ដែរ យើងអាចប្រើប្រាស់ property padding តែមួយក្នុងការកំណត់គំលាតខាងក្នុង element នៅគ្រប់ជ្រុងទាំងអស់។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Padding Property</title>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
The padding shorthand property - 4 values
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
</body>
</html>
The padding shorthand property - 4 values
ដូចគ្នានឹង margin ដែរ បើសិនជាយើងចង់កំណត់កំលាតនៅខាងក្នុង element រវាងជ្រុងខាងលើ ជ្រុងឆ្វេង-ស្តាំ និងជ្រុងខាងក្រោម យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Padding Property</title>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
The padding shorthand property - 3 values
This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.
</body>
</html>
The padding 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>Padding Property</title>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
The padding shorthand property - 2 values
This div element has a top and bottom padding of 25px, and a right and left padding of 50px.
</body>
</html>
The padding 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>Padding Property</title>
<style>
div {
border: 1px solid black;
padding: 25px ;
background-color: lightblue;
}
</style>
</head>
<body>
The padding shorthand property - 1 values
This div element has a top, bottom, left, and right padding of 25px.
</body>
</html>
The padding shorthand property - 1 values
នៅក្នុងការប្រើប្រាស property padding បញ្ហាមួយតែងតែកើតឡើងជាញឹកញយ គឺថានៅពេលដែលយើងបង្កើនទំហំ padding អោយកាន់តែធំ element កាន់តែរីកធំ។ ដើម្បីដោះស្រាយបញ្ហានេះ យើងត្រូវប្រើប្រាស់ property border-sizing ដោយផ្តល់តំលៃអោយវាជា border-box ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Padding Property</title>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
Padding and element width - with box-sizing
This div is 300px wide.
The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</body>
</html>
