| Property | Description | Values | |
|---|---|---|---|
| margin-top | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ | auto length | เช่น 5px, 5pt,5cm |
| margin-bottom | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ | ||
| margin-left | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ | ||
| margin-right | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ | ||
| margin | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว | ||
| padding-top | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ | ||
| padding-bottom | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ | ||
| padding-left | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ | ||
| padding-right | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ | ||
| padding | ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก) |
ตัวอย่าง
ถ้าไม่ได้ใช้้งาน margin และ padding
ข้อความข้างนอกด้านบน
<div style="border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px
ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
</div>
ข้อความข้างนอกด้านล่าง
ผลลัพธ์<div style="border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px
ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
</div>
ข้อความข้างนอกด้านล่าง
ข้อความข้างนอกด้านบน
block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
ข้อความข้างนอกด้านล่างลองมาดูต่อว่า... ถ้านำ margin และ padding มาใช้งานจะเป็ฯอย่างไร
ตัวอย่าง
การใช้งาน margin และ padding
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
<div style="margin:20px; padding:20px; border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ผลลัพธ์<div style="margin:20px; padding:20px; border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
block นี้มี Border สีน้ำเงิน ขนาด 20px
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่างมี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
ถ้ายังงงๆ ว่าตรงไหนคือ margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ
ตัวอย่าง
การใช้งาน margin ที่แต่ละด้านไม่เท่ากัน
<div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">
block นี้มี Border สีส้ม ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ผลลัพธ์ block นี้มี Border สีส้ม ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือ margin ด้านบน
block นี้มี Border สีส้ม ขนาด 2px
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 30x นี่คือ margin ด้านล่างมี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
ตัวอย่างการใช้งาน padding ที่แต่ละด้านไม่เท่ากัน
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
<div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">
block นี้มี Border สีเขียว ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ผลลัพธ์ <div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">
block นี้มี Border สีเขียว ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
block นี้มี Border สีเขียว ขนาด 2px
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่างมี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
พิเศษ+++
h1 {margin: 10px}
Happy New Year
margin ทั้ง4 ด้านเป็น 10px
h1 {margin: 10px 2%}
Happy New Year
margin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสาร
h1 {margin: 10px 2% -10px}
Happy New Year
margin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px
h1 {margin: 10px 2% -10px auto}
Happy New Year
margin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำหนดตาม Browserตัวอย่าง
การใช้งานตั้งแต่ Font Border Background Text และ Margin Padding
<html>
<head>
<style type="text/css">
.mixcode {
font: normal small-caps bold 16px Arial, Helvetica, sans-serif;
color:#FF0033;
text-align:center;
text-decoration:underline;
word-spacing:0.5em;
background-color:#FBEFFC;
border:2px dotted #FF6699;
margin:20px;
padding:20px
</style>
</head>
<body>
Hello all,
<div class="mixcode">Happy New Year 2009</div>
Hope you enjoy your stay here.
</body>
</html>
ผลลัพธ์<head>
<style type="text/css">
.mixcode {
font: normal small-caps bold 16px Arial, Helvetica, sans-serif;
color:#FF0033;
text-align:center;
text-decoration:underline;
word-spacing:0.5em;
background-color:#FBEFFC;
border:2px dotted #FF6699;
margin:20px;
padding:20px
</style>
</head>
<body>
Hello all,
<div class="mixcode">Happy New Year 2009</div>
Hope you enjoy your stay here.
</body>
</html>
Hello all,
Happy New Year 2009
Hope you enjoy your stay here.
