การทำงานกับ margin ใน CSS
ตอนนี้เราจะมาทำความเข้าใจกับคุณสมบัติ
margin ซึ่งกำหนดระยะห่างระหว่าง
องค์ประกอบต่างๆ ของเว็บไซต์ มาดูกันว่า
มันเป็นอย่างไรในทางปฏิบัติ
เริ่มต้นผมจะยกตัวอย่างบล็อกสองอันที่ซ้อนกัน
โดยไม่มี margin (พวกมันจะติดกัน
และเราจะเห็นขอบสองชั้น):
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 300px;
border: 1px solid red;
}
#child {
height: 100px;
border: 1px solid green;
}
:
ทีนี้ลองตั้งค่า margin ที่
30px ให้บล็อกด้านใน:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 300px;
border: 1px solid red;
}
#child {
height: 100px;
border: 1px solid green;
margin: 30px;
}
:
