เกี่ยวกับการผลักตัวเองออกจากขอบ ระยะห่างระหว่างขอบ เช่น จากเรามักตีกรอบสี่เหลี่ยมเวลาวาดภาพ และจะมีส่วนที่เหลือ อยู่นอกกรอบ นั่นแหล่ะคือ ขอบ (Margins)
margin-top : ขอบบน
margin-right : ขอบขวา
margin-bottom : ขอบล่าง
margin-left : ขอบซ้ายการใช้ margin แบบกำหนดค่าทั้งสี่ด้านพร้อมกัน จะเรียงลำดับเป็น บน-ขวา ล่าง-ซ้าย ซึ่งเราเห็นความแตกต่างของทั้งสี่ด้าน อีกด้านหนึ่งต้องรอให้มีเนื้อหามาแสดง ถึงจะเห็นได้ชัด
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100pxลองนำมาเขียน จะได้ดังนี้ เราเขียน แบบ Internal CSS [margin: ……;]
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: 25px 50px 75px 100px;
border-radius: 20px;
border : solid green;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
การใช้ margin แบบกำหนดค่าสามด้าน จะเรียงลำดับเป็น บน-ขวา-ล่าง ซึ่งการกำหนดสามด้านนี้แปลว่าอีกด้านหนึ่งคือ ซ้าย เราไม่ได้กำหนดเลย แต่ผลที่ได้เหมือนจะเป็นการรู้ๆ กันว่า ถ้าไม่กำหนด อีกด้านตรงข้ามจะเท่ากันทันที จะเป็นในตอนถัดไป
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75pxลองนำมาเขียน
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: 25px 50px 75px;
border-radius: 20px;
border : solid green;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
การใช้ margin แบบกำหนดค่าสองด้าน จะเป็นการกำหนดเป็นคู่ อย่างซ้าย 25px ขวาก็ต้องเท่ากันอะไรแบบนี้ จะจับคู่กันโดยอัตโนมัติ
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50pxลองนำมาเขียน
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: 25px 50px;
border-radius: 20px;
border : solid green;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
การใช้ margin แบบกำหนดค่าเดียว จะเป็นการกำหนดให้กับทุกด้าน โดยอัตโนมัติ
margin: 25px;
all four margins are 25pxลองนำมาเขียน
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: 50px;
border-radius: 20px;
border : solid green;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
The auto Value
การกำหนด margin แบบ auto คือเขาจะหาพื้นที่ว่างให้เราอัตโนมัติ โดยที่เราไม่ต้องกำหนด
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: auto;
width: 300px;
border : 1px solid green ;
border-radius: 20px;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
The inherit Value
คือจะมี การสืบทอด (inherit) อย่างข้างใน div จะมี element และภายใน element จะมี class อยู่ และ element จะสืบทอดค่าที่กำหนด ให้กับ div เหมือนกันเป๊ะๆ เลย
<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin: 50px;
}
p.mix {
margin: inherit;
}
</style>
</head>
<body>
<div>
<p class="mix">Hello World </p>
</div>
</body>
</html>
Margin Collapse พัง
คือ การกำหนด margin ที่ใช้งานไม่ได้ หรือ พังนั้นเอง จะเป็นแบบนี้มาดูกัน ผลที่ได้ คือ margin ไม่ทำงานจ้าาา ทุกคน นิ่งเลย
<!doctype html>
<html>
<head>
<style>
h1.mix{
margin: 0 50px 0 0;
border-radius: 20px;
border : solid green;
background-color:rgb(207, 233, 156);
}
</style>
</head>
<body>
<h1 class="mix">Hello World!</h1>
</body>
</html>
ทั้งหมดทั้งมวลเกี่ยว Margin เน้อ ต้องการขอบบาง - หนา ลองปรับกันดู เพื่อจะช่วยได้เราได้ศึกษาจาก W3schools เรื่อง CSS Margins ต้องลองถึงจะรู้ ฟ้าวๆๆ
