-Howto-

สวัสดีครับ
 
ช่วงนี้กำลังเตรียมตัวจะเปิดร้านขายการ์ตูน ต้องจัดการกับหน้าเว็บอยู่บ่อยๆ
ปัญหาที่ตามมาคือ ต้องเจอกับ code : margin , padding บ่อยมาก เว็บจะสวยไม่สวย ก็เพราะไอคำสั่งสองตัวนี้นี่แหละ!! อีกทั้ง คำสั่งนี้ มีส่วนมากทีเดียวในการจัดการหน้ายล๊อคให้ดูงาม มีมาตรฐานด้วยครับ~
เลยเป็นประเด็นในการตั้งเอนทรี่ครั้งนี้ซะเลย (ความจริงหาเรื่องอัพกันบล๊อคล้าง XD)
 
คำเตือน! Entry นี้ ไม่เหมาะกับผู้ที่ไม่มีพื้นฐานการเขียนเว็บมาก่อนเลย เพราะท่านจะ... งง~
 
margin , padding คืออะไร.
 
margin : คือคำสั่งสำหรับเว้นระยะห่างจาก จุดที่กำหนดเข้ามา เป็นจำนวน ... px (พิกเซล)
 
padding : คือคำสั่งสำหรับเว้นระยะห่างจาก margin เข้ามาอีกที เป็นจำนวน ... px (พิกเซล) เช่นกัน
 
ทั้งสองตัวนี้เป็นชุดคำสั่งที่อยู่ใน css ครับ
 
* css (Cascading Style Sheets) ชุดคำสั่งสำหรับการตบแต่งหน้าเว็บเพจ รายละเอียดเต็มๆลองไปเซิชหาดูที่อากู๋นะครับ *
 
 
บอกไปอาจไม่เห็นภาพ งั้นเรามาดูของจริงกันเลยครับ
1. จาก Code box_model นี้ 
< html>
<head>
     <title> CSS Test </title>
     <style type="text/css">
     #box {
          background:#F8CA00;
          height:150px;
          width:150px;
      }
      </style>
</head>
<body>
           <div id="box">
            Hi
           </div>
</body>
</html>
 
จะได้ผลลัพธ์ดังนี้
 
เป็นผลจากการสร้าง css box โดยกำหนดความกว้าง และความสูงเป็น 150 px
(ส่วนโค๊ดที่แสดงผลจะเน้นเป็นตัวแดงนะครับ)
 
 
2. ต่อไปจะเป็นการเพิ่มคำสั่ง margin เข้าไปใน #box นะครับ
#box {
        background:#F8CA00; 
        height:150px;
        width:150px;
        margin:20px;
        border:20px solid #8A9B0F;
}
------
<body>
    text text text v 20px
        <div id="box">
        yes
        </div>
    text text text
</body>
 
จากใน code ผมได้เพิ่ม margin:20pxl  กับ กำหนดขนาดเส้นขอบ (border) เข้าไปในชุด #box
จะได้ผลเป็น
สังเกต จะมีระยะห่างระหว่างตัว box กับข้อความ text text text เป็นระยะ 20px เนื่องจากเรากำหนด marginไป 20px (เทคนิคการกำหนด margin เดี๋ยวจะพูดอีกทีครับ)
 
3. ต่อไปจะเริ่มนำ padding เข้ามาใช้งาน เพื่อกำหนดระยะห่างระหว่างขอบ (ใน box)กับตัวข้อความ
#box {
        background:#F8CA00;
        height:150px;
        width:150px;
        margin:20px;
        border:20px solid #8A9B0F;
        padding:20px;   
}
------
<body>
    text text text v 20px
        <div id="box">
        yes
        </div>
    text text text
</body>

ก็จะได้ผลแบบนี้
 
จากตัวอย่าง จะเห็นว่า Margin จะเป็นตัวกำหนดระยะห่าง ระหว่าง Object (วัตถุ) ที่กำหนด (ในที่นีี้คือ #box)
กับสิ่งรอบข้าง (ก็คือข้อความ text นั่นเอง)
 
ส่วน padding จะกำหนดระยะห่างในตัววัตถุอีกที เหมือนการจัดย่อหน้า (ในที่นี้คือ กำหนดระยะห่างของข้อความ yes ใน #box)
 
โดยเราสามารถกำหนดค่ามุมทั้ง 4 มุม (บน ขวา ล่าง ซ้าย) โดยใช้ค่า
margin: 20px 20px 20px 20px;
เรียงลำดับจากซ้ายไปขวา ก็คือ "บน ขวา ล่าง ซ้าย"  ตามเข็มนาฬิกาครับ
เราสามารถย่อ code ได้เป็น
margin: 20px 10px;
จากซ้ายไปขวา 20px คือ กำหนด "บน และ ล่าง" ระยะห่าง 20px
10px ต่อมาคือ กำหนด "ซ้าย และ ขวา" ระยะห่าง 10px
 
หรือถ้าเราต้องการกำหนด 4 มุึมระยะเท่ากัน เราสามารถเขียนเพียง
margin: 10px;
ตัวเดียวก็ได้ คือ เว้นระยะ บน ขวา ล่าง ซ้าย ไป 10px
 
----------------------------------------------------------------------------
Code ชุดนี้ มีประโยชน์ในการแก้ไข Blog อย่างไร?


จะเห็นว่า ในทุกจุดของ Blog จะมีระยะห่าง จากตำแหน่งต่างๆ
ซึ่งส่วนเหล่านั้น ล้วนสามารถใช้ margin , padding ในการกำหนดระยะห่างได้ทั้งนั้น!
 
ไม่เข้าใจตรงไหนถามได้นะครับ!
 
ขอให้สนุกกับการปรับแต่ง Blog หรือเขียน web ^ __ ^
 
ps.สามารถดาวโหลดไฟล์จากบทความนี้ได้ที่ลิงค์ข้างล่างนี้ครับ