[CSS] mergin, padding, top, right, left, bottom มันใช้ต่างกันยังไงครับ

[GillBate]

  ขอคำชี้แนะให้ข้าน้อยด้วย ถ้าท่านไม่ตอบข้าจะคุกเข่าโคกศีรษะเยี่ยงนี้จนกว่าเว็บนี้จะหาไม่

[doopro]

http://www.csscentering.com/css-examples/margin-padding.html

margin นะครับ ไม่ช่าย mergin

พวก left , right ส่วนใหญ่ผมใช้กับ float:left , float:right ไว้จัด layout ตัวอย่างเช่น กรณีมี แบ่งซ้าย ขวา
top bottom นี่ ผมใช้กับพวก .test {position:absolute; top:0; left:0; z-index:1000;} สำหรับวาง layer นี้ไว้บนสุด

ถ้าสงสัยนี่ลอง search google ดูนะครับ เมื่อก่อนผมก็ไม่ค่อยรู้เรื่อง ทำไปทำมาก็จะรู้บ้าง มั่วๆๆไปวันๆ อิอิ

[golfer007]

margin คืด ระยะห่างของขอบของอิลีเมนนั้นจากตำแหน่งปกติ

padding คือ ระยะห่างจากขอบของส่วนที่อยู่ด้านในอิลีเมน

top, right, left, bottom  ก็ กำหนดว่าจะให้ห่างจากตำแหน่งไหน ด้านบน ด้านขวา ด้านซ้าย ด้านล่าง

อธิบายไม่เป็น ดูรูปละกัน 

[deadclosed]

margin คืด ระยะห่างของขอบของอิลีเมนนั้นจากตำแหน่งปกติ

padding คือ ระยะห่างจากขอบของส่วนที่อยู่ด้านในอิลีเมน

top, right, left, bottom  ก็ กำหนดว่าจะให้ห่างจากตำแหน่งไหน ด้านบน ด้านขวา ด้านซ้าย ด้านล่าง

อธิบายไม่เป็น ดูรูปละกัน 

เสริม การเขียน
margin: 0 0 0 0; คือต่ำแหน่ง บน ขวา ล่าง ซ้าย
padding:0 0 0 0; ก็เช่นกัน
ตัวอย่าง
margin:-10px 0 0 10px;

[GillBate]

คำว่าอิลีเม้นในที่นี้หมายถึงพวก <div> รึเปล่าครับ
แล้วพวก left:14px; นี้ มันใช้ข้างในหรือข้างนอก อิลีเม้นครับ

[whitecross]

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 ด้วยครับ
(พอดีว่าผมทำเว็บเกี่ยวกับอบรมสอนเขียนเว็บฟรี แต่ตอนนี้เว็บยังไม่เสร็จครับ แต่ลิ้งค์ไปก่อนได้เลยครับ)

ปล. พิมพ์ตั้งนานแนะ พิมพ์ไป กินมาม่าไป หิวๆๆๆ

[ball6847]

margin ระยะห่างจากด้านนอก
padding ระยะห่างภายในจากขอบถึงเนื้อหาภายใน

ทั้ง margin และ padding นับระยะจาก border

left right top bottom ต้องใช้กับ position ถ้าใช้โดยไม่ได้ตั้ง position: ก่อน ใช้ left right top bottom ก็ไม่มีผล
อันนี้เงื่อนไขมันเยอะ ขี้เกียจอธิบาย ลองค้น google ดูคับ css position อะไรประมาณเนียะ