css margin padding and......

เวลาผมดูโค้ด css เช่น


h1#page_owner_title {
width: 655px;
margin: 0 auto;
padding: 40px 0 0 0;
background-color: transparent;
background: none;
color: #488AC7;
border: none;
font-size: 70px;
text-align: center;
}

ด้วยภาษาอังกิดระดับระดับงูปลาหมาไก่ของผม  ผมก็แปลได้ละว่า color text background คือไร

แต่พอมาเจอ margin padding  border ชักเริ่มมึนว่ามันคืออะไรหว่า เป็นมาจิ้นหุ้นอะป่าว อิอิ

และเมื่อเจอคำพวกนี้ใน css บ่อยๆเข้าชักหงุดหงิด  ต้องหาแล้วละว่ามันคือไร




สรุปแบบง่าย มันเหมือนมีกระดาษพิมพ์ดีด 1 แผ่น ที่มีข้อมูลพิมพ์อยู่ เว้นขอบกั้นหน้า 4 ด้าน และกระดาษแผ่นนี้วางอยู่บนโต๊ะ


- เส้นประเข้มรอบนอกเหมือนกับ ขอบโต๊ะ ขอบจอ เป็นที่อยู่ของ สีbackground โดยที่รูปbackground จะวางทับอยู่บนสีอีกที

- เส้นสีดำๆ คือแผ่นกระดาษที่เราแสดงเนื้อหาข้อมูลของเรา (เส้นดำเข้ม)
เวลาเพิ่มค่า margin เหมือนกับเรา ขยับ แผ่นกระดาษ ออกห่างจากขอบ
โต๊ะเท่าค่าmargin (ผลที่ตามมาคือ จะเห็นรูป background ตามช่องที่ขยับ)

- เส้นประ เทา คือขอบกระดาษ border เผื่อขอบกระดาษเราหนา บาง




-เส้นเทาในสุด คือ กั้นหน้าของข้อมูลในแผ่นกระดาษ การเพิ่มค่า padding ก้อคือการเพิ่มค่ากั้นหน้า โดยไม่ได้เลื่อนแผ่นกระดาษ (ผลก้อคือ พารากราฟข้อความก็จะขยับไปทางขวาหรือทางอื่น มากขึ้น)



ลองดูรูปและสี เพิ่มเติม


อ้างจาก
http://www.html.net/tutorials/css/lesson9.asp
http://learners.in.th/blog/zest/7058
http://learners.in.th/file/tongball/view/9283