CSS : Border [3]

posted on 18 May 2006 14:08 by lemonice  in TuTorial

มาล่ะๆ กับตอนที่ 3 ใช่ป่ะ เออ...ใช่ กับเรื่อง Border คราวนี้เป็นในหัวข้อของ
Margin&Padding ซึ่งอาจเป็นหัวข้อที่ดูยากอ่ะนะ แต่ความจริงแล้วเนื้อหามันมี
ติ๊ดเดียวเอง คนทำยังงงเลย ... เหอๆ ไปดูเองดีกว่า

Margin

เราเคยบอกไปแล้วว่า Margin มันคืออะไร แต่หลายคนคงลืมไปแล้ว และก็ขี้เกียจ
กลับไปเปิดดูอ่ะนะ เรารู้ งั้นจะบอกอีกทีละกัน

Margin คือ ระยะห่างระหว่างขอบของพื้นที่ถึงเส้นกรอบ


|
บน
|
------ ซ้าย ----
กรอบ
-- ขวา --
|
ล่าง
|


เช่น เรากำหนดให้พื้นที่สีเทา คือพื้นที่ที่เราจะวางกรอบสีเหลือง แต่เราไม่ต้องการ
ให้มันอยู่ตรง ชิดซ้าย ชิดขวา มันไม่แนว เราก็สามารถใช้ Margin กำหนดระยะ
ได้เลย

margin-top : กำหนดระยะห่างจากด้านบน
margin-right :
กำหนดระยะห่างจากด้านขวา
margin-bottom :
กำหนดระยะห่างจากด้านล่าง
margin-left :
กำหนดระยะห่างจากด้านซ้าย

หรือหากเราจะกำหนดในครั้งเดียวเลยว่า จะห่างแต่ละด้านเท่าไรก็

Margin : value1(บน),value2(ขวา),value3(ล่าง),value4 (ซ้าย)
ตามลำดับน่ะ

Padding
Padding คือ ระยะระหว่งขอบของกรอบถึงข้อความ

ก็คล้ายๆกับของ Margin หากเราจะจัดข้อความให้แนว ต้องต้องใช้ Padding

|
บน
|
-- ซ้าย ----
ข้อความ
--- ขวา ---
ล่าง
|


Padding-top : กำหนดระยะห่างจากด้านบน
Padding-right :
กำหนดระยะห่างจากด้านขวา
Padding-bottom :
กำหนดระยะห่างจากด้านล่าง
Padding-left :
กำหนดระยะห่างจากด้านซ้าย

หรือแบบกำหนดครั้งเดียวเลยก็

Padding : value1(บน),value2(ขวา) ,value3(ล่าง),value4(ซ้าย)
ตามลำดับน่ะ


เห็นป่ะ สั้นติ๊ดเดียว ถามมีลักษณะคล้ายๆกันอีก
เอาล่ะ ต่อไปเราจะมาพูดถึงรายละเอียดปลีกย่อยของ Padding & Margin
ระยะห่างที่เราใช้ : เราสามารถกำหนดตัวเลขในหน่วยอะไรก็ได้
แต่ที่ใช้ในเว็บก็ต้อง Px ล่ะน่ะ หรือ ไม่เราก็สามารถกำหนดเป็น % ก็ได้
ในกรณีที่กรอบของเรามีความหนา Padding จะนับระยะห่างจากเส้นกรอบ
ด้านใน
การใส่ Margin หรือ Padding เราต้องดูด้วยว่า พื้นที่จิงนั้นคืออะไร

เช่น ใน Exteen
เราจะใส่รูป .gif ไฟล์เล็กๆ หน้าหัวข้อวันที่ ก็ต้องเข้าใจว่า พื้นที่คือ ช่วงกรอบของ
วันที่ ไม่ใช่พื้นที่ทั้งหน้าเว็บ การใส่ระยะห่างจะได้ไม่ผิดพลาด

เอาล่ะ จบไปล่ะสำหรับ Margin & Padding พรุ่งนี้ ก็ยังอยู่ในเรื่อง Border
มันยังมีโค้ดอีกนิดหน่อย จะจบล่ะ แล้วจะต่อด้วยเรื่อง Cursor สักกะที

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

ขอบคุณนะคะ

เข้าใจขึ้นเยอะเลยค่า
อ๋อ... ที่แท้ก็เรียงตามนี้นี่เอง... ขอบคุณมากๆครับ ^^

#2 By ||- Kutzuki -|| on 2006-05-18 16:50

ชอบมึนกับ padding เวลาใส่รูป .gif อ่านแล้วพอเข้าใจขึ้นเยอะเลยครับ

#3 By Zeza[wind`] on 2006-05-18 17:40

ใจเย็นๆเต้ ทำไปเถอะ พี่ให้กำลังใจเสมอ

#4 By Fenix M. Lastwaltz on 2006-05-18 18:35

มึนเลย
งงที่สุดก็ padding กับ margin นี่แหละ

#5 By Gori ซัง on 2006-05-18 21:00

แงงงงงง ... พี่คะ งงมากๆเลย
ไม่เข้าใจเลยซักกะติ๊ดดดด

T^T
ยอดเยี่ยมเลยครับ

#7 By อดิสรณ์ on 2006-05-20 16:02

เจ๋งอะเคอะ ทั่น มาบลอคนี้ดั้ยความรุ้เพียบ

#8 By :✩:ずん_zun::。⊙﹏⊙。 on 2006-05-21 14:00

อ่า พึ่งรู้ว่าเธอกลับมาเเว้ว

#9 By !>Benz on 2006-05-21 15:25

ม่ะรู้เยื่องเยย ฟิ้ว~~~~~~ แอดปะหาแล้วคร่า ตอบด้วยน่อ

#10 By ๏ Style Rung`Za ๏ on 2006-05-22 09:25

ขอบคุณนะครับ ได้เข้ามาดูความรู้เกี่ยวกับการทำบลอกต่างๆ ขอโทษที่ไม่ได้เม้นท์ในทุกๆเอนทรีที่ดูนะครับ

ปล.ทำสีสันตรงเนื้อหาเอนทรีอ่านง่ายดีนะครับ
รู้อะไรขึ้นมาอีกเยอะเลยค่ะ ขอบคุณมากๆ แล้วก็ขอโทษด้วยอีกคน ที่ไม่ได้ตามเม้นในเอนทรี่ที่ดู

ธีมท่านสวยจัง อยากทำมั่งแต่จนปัญญา

ขอถามหน่อยนะคะ
ถ้าจะทำส่วนแสดงเนื้อหาให้ใสปิ๊ง ไม่มีสี
ต้องทำยังไงเหรอคะ (เพิ่งหัดทำ ยังไม่ค่อยรู้อะไรอ่ะ)

#12 By ZeileZ on 2006-06-09 10:55

พี่ ช่วยหนูที ลองทำดูแล้ว แต่มันไม่มีอะไรเปลี่ยนไปเลยอะค่ะ ทำไงดีอ่า จะกลับไปใช้ตรงที่เค้ามีให้อยู่แล้วแต่ก็ไม่ได้แล้ว ที่พี่อธิบายก็พอเข้าใจอยู่ แต่จะเขียนไงอะคะ ??? ลองปรับๆเปลี่ยนๆดู แต่มันไม่เกิดอะไรขึ้นเลย เปลี่ยนอะไรไม่ได้อะค่ะ ทำไงดีอ่าคะ

#13 By OranGe on 2006-07-10 22:08

ขอบคุณที่มาแนะนำนะครับ ดีมาก ๆ เลย จะเอาไปลองทำตามกับล๊อกคนอื่นดู (เพราะบล๊อกตัวเอง ขี้เกียจปรับแล้ว)

#14 By เจ้าชายน้อย on 2006-09-24 10:30

อธิบายได้เข้าใจมากๆ เลยค่า... แต่ปัญหาคือตอนเอาไปปฏิบัติจริงนี่สิ padding กับ margin นี่แหละ ตัวงงอันดับ 1 เลย เมื่อวานก็ปล้ำอยู่กับมันสองตัวนี่ตั้งนาน เพราะพอเขียนๆ ไปเรื่อยๆ แล้วงงเองว่ามันคือระยะของจุดไหน เหอๆๆๆ เป้นความเข้าใจที่พอเอาไปทำจริงแล้วไม่เข้าใจ เพราะงงเอง 5555

#15 By on 2006-10-06 00:36

อ่า... ยังมึงอยู่เลย

เมนท์แล้วกลับไปอ่านใหม่

#16 By || noinazama || on 2006-10-14 14:46

Google is the best search engine

#17 By rsSCTYdE (85.255.113.76) on 2007-03-02 20:11

ขอถามครับคือว่า blog นี่จะทำเป็น page อีกเพจ ทำไงครับเหมือนเว้บหนะครับ มีวิธีมั้ย ลองดูบล็อกผมสิ คือ ผมอยากทำเพจเพื่อเก็บข้อมูลอื่นๆไม่ให้กระจายช่วยบอกหนทางทีครับ มือใหม่หัดทำบล็อก

#18 By NuFortuner (203.113.55.211) on 2007-06-26 17:20