CSS...Trainning by whitecross (www.projectplay.in.th 
)ถ้าท่านใดชอบจะเอาไปแปะที่อื่นก็ได้ครับ แต่ขอเครดิตลิ้งค์ไปที่ www.projectplay.in.th ด้วยครับ
(พอดีว่าผมทำเว็บเกี่ยวกับอบรมสอนเขียนเว็บฟรี แต่ตอนนี้เว็บยังไม่เสร็จครับ แต่ลิ้งค์ไปก่อนได้เลยครับ) Margin...ใช้สำหรับขยับตำแหน่งของ Tag นั้นๆ หรือการเลื่อนตำแหน่ง เช่น BG ของเราอยู่ติดขอบด้านบนสุดของจอ แต่เราต้องการให้ห่างจากด้านบน 50px ก็ให้กำหนด margin-top เอาไว้ที่ 50px แค่นี้ BG ก็จะห่างลงมา 50px แล้ว โดยค่าที่เราใส่ให้กับ margin นั้น จะคำนวนเพิ่มจากขนาดของ Tag ของเราด้วย คือ ถ้าเราต้องการให้ Tag ของเราอยู่ห่างจากด้านบน แต่ถ้าห่างากเกิน ด้านล่างก็จะไปซ้อน Tag อื่น ดังนั้นเราต้องนำมาลบกับขนาด Tag เรา เช่น ขนาดด้านบนมีพื้นที่ 500px แต่เราต้องการให้ Tag มีขนาดสูงไม่เกิน 500px และให้เว้นลงมาจากด้านบน 50px ก็ให้เราเอา 500 - 50 = 450px นี่คือค่าที่เราสามารถกำหนดความสูงของ Tag เราได้
รูปแบบการใช้งาน...1. กำหนดใส่คู่ไปกับ Tag ได้เลยครับ เช่น <div class="header" style="margin:กำหนดค่า">
2. กำหนดไว้ในไฟล์ CSS เช่น...
.header {
margin:กำหนดค่า;
}
การกำหนดค่าแบบเดี่ยวๆ...1. margin-top:กำหนดค่าให้ห่างจากด้านบน;
2. margin-left:กำหนดค่าให้ห่างจากด้านซ้าย;
3. margin-right:กำหนดค่าให้ห่างจากด้านขวา;
4. margin-bottom:กำหนดค่าให้ห่างจากด้านล่าง;
การประกาศค่าของ margin...1. margin:0 0 0 0; เป็นการกำหนดค่าแบบหลากหลายขนาด ให้นับตามเข็มนาฬิกาครับ คือ margin:บน ขวา ล่าง ซ้าย;
***วิธีนี้ใช้กำหนดขนาดให้ขยับต่างๆกันได้ 4 ทิศทาง โดยที่ไม่ต้องเหมือนกันก็ได้2. margin:0 0; เป็นการกำหนดค่าแบบ Fix ขนาด ให้นับตามเข็มนาฬิกาครับ คือ margin:บน+ล่าง ซ้าย+ขวา;
***วิธีนี้ใช้กำหนดขนาดที่เท่ากัน เช่น กำหนดขนาดของ Tag ให้อยู่กึ่งกลางจอ คือ margin:0 auto 0 auto;*** การใช้งาน margin ถ้าจะให้เลื่อนตำแหน่งได้นั้นไม่จำเป็นต้องกำหนด position:absolute; ก็ได้ครับ แต่ต้องกำหนดขนาดของ Tag และบริเวฯที่จะให้เลื่อนไปนั้นจะต้องมีพื้นที่เหลือพอให้ขยับด้วย แต่หากใช้ position:absolute; จะทำให้เนื้อหาใน Tag ไปลอยอยู่บน Tag ของภาพพื้นหลังได้ครับPadding...ใช้สำหรับเว้นระยะห่างจากขอบของ Tag นั้นๆ หรือเว้นที่ว่างเอาไว้นั่นเอง เช่น เรากำหนดความยาวเอาไว้ 300px แต่กำหนด padding-left เอาไว้ที่ 20 px จะทำให้ Tag ของคุณเหลือพื้นที่เพียง 280px เท่านั้น เพราะอีก 20 หายไปกับการเว้นระยะ ดังนั้นต้องคำนวนเพิ่มไปด้วย เพื่อให้ขนาดได้ 300px ตามที่ต้องการ นั่นก็คือ ขนาดที่ต้อการ...300px + ขนาดที่เว้นว่าง...20px = 320px
รูปแบบการใช้งาน...1. กำหนดใส่คู่ไปกับ Tag ได้เลยครับ เช่น <div class="header" style="padding:กำหนดค่า">
2. กำหนดไว้ในไฟล์ CSS เช่น...
.header {
padding:กำหนดค่า;
}
การกำหนดค่าแบบเดี่ยวๆ...1. padding-top:กำหนดค่าให้ห่างจากด้านบน;
2. padding-left:กำหนดค่าให้ห่างจากด้านซ้าย;
3. padding-right:กำหนดค่าให้ห่างจากด้านขวา;
4. padding-bottom:กำหนดค่าให้ห่างจากด้านล่าง;
การประกาศค่าของ margin...1. padding:0 0 0 0; เป็นการกำหนดค่าแบบหลากหลายขนาด ให้นับตามเข็มนาฬิกาครับ คือ padding:บน ขวา ล่าง ซ้าย;
***วิธีนี้ใช้กำหนดให้เว้นที่ว่างต่างๆกันได้ 4 ทิศทาง โดยที่ไม่ต้องเหมือนกันก็ได้2. margin:0 0; เป็นการกำหนดค่าแบบ Fix ขนาด ให้นับตามเข็มนาฬิกาครับ คือ margin:บน+ล่าง ซ้าย+ขวา;
***วิธีนี้ใช้กำหนดให้เว้นที่ว่างที่ต้องเท่ากันหรือบาลานซ์กัน
*** ส่วนมากจะนิยมใช้ padding กับการเว้นระยะห่างจากขอบ Tag เพื่อความสวยงาม หากมีเส้นขอบ ก็จะเป็นการเว้นที่ว่างไม่ให้ตัวหนังสือติดกับเส้นขอบมากเกินไปนั่นเองถ้าท่านใดชอบจะเอาไปแปะที่อื่นก็ได้ครับ แต่ขอเครดิตลิ้งค์ไปที่ www.projectplay.in.th ด้วยครับ
(พอดีว่าผมทำเว็บเกี่ยวกับอบรมสอนเขียนเว็บฟรี แต่ตอนนี้เว็บยังไม่เสร็จครับ แต่ลิ้งค์ไปก่อนได้เลยครับ) ปล. พิมพ์ตั้งนานแนะ พิมพ์ไป กินมาม่าไป หิวๆๆๆ
พัฒนาเว็บไซต์
