home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การตั้งค่าระยะขอบสำหรับแต่ละด้านโดยใช้ CSS

CSS ช่วยให้เราควบคุมพื้นที่รอบๆ แต่ละด้านขององค์ประกอบได้ คุณสมบัติระยะขอบ CSS เป็นชวเลขสำหรับคุณสมบัติต่อไปนี้:ระยะขอบบน ระยะขอบขวา ระยะขอบล่าง และระยะขอบซ้าย

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติขอบ CSS มีดังต่อไปนี้ -

Selector {
   margin-top: /*value*/
   margin-right: /*value*/
   margin-bottom: /*value*/
   margin-left: /*value*/
}

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติระยะขอบ CSS -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: auto;
   margin-bottom: 4em;
   width: 30%;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   outline: thin dotted;
   text-align: center;
}
div + div {
   margin-right: 30%;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 45%;
   margin-top: -190px;
   box-shadow: inset 0 0 6px orange;
}
</style>
</head>
<body>
<div>
This is demo text
</div>
<div>One (different margins)</div>
<div>Two (different margins)</div>
</body>
</html>

ผลลัพธ์

การตั้งค่าระยะขอบสำหรับแต่ละด้านโดยใช้ CSS

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-top: 7%;
   margin-left: 25%;
   margin-bottom: -3em;
   width: 40px;
   height: 40px;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   border-top-right-radius: 100px;
}
div + div {
   margin-right: 30%;
   border-top-right-radius: unset;
   border-top-left-radius: 100px;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 25%;
   margin-top: -140px;
   box-shadow: inset 0 0 6px orange;
   border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

ผลลัพธ์

การตั้งค่าระยะขอบสำหรับแต่ละด้านโดยใช้ CSS