สวัสดีครับ
 
ช่วงนี้กำลังเตรียมตัวจะเปิดร้านขายการ์ตูน ต้องจัดการกับหน้าเว็บอยู่บ่อยๆ
ปัญหาที่ตามมาคือ ต้องเจอกับ 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.สามารถดาวโหลดไฟล์จากบทความนี้ได้ที่ลิงค์ข้างล่างนี้ครับ
 
 

Comment

Comment:

Tweet

<a href="http://www.rodbachar.com/%E7%A9%BA%E6%B0%97%E6%B8%85%E6%B5%84%E6%A9%9F-%E9%96%A2%E9%80%A3%E7%94%A8%E5%93%81-c-13.html">ॳ`ݥ` ՚囷C vBƷ</a>

#980 By http://www.exercisebikedeals.com/ (192.187.108.250|192.187.108.250) on 2014-08-25 05:06

Accompanying the book is a DVD that contains segments from all the interviews intercut with examples of the interactions under

#979 By (27.150.234.20|27.150.234.20) on 2014-08-14 00:49

In Designing Interactions, award-winning designer Bill Moggridge introduces us to forty influential designers who have shaped our interaction with technology. Moggridge, designer of the first laptop computer (the GRiD Compass, 1981) and a founder of the design firm IDEO, tells us these stories from an industry in

#978 By (27.150.234.20|27.150.234.20) on 2014-08-13 22:38

And Moggridge tells the story of his own design process and explains the focus on people and prototypes that has been successful at IDEO?

#977 By (27.150.234.20|27.150.234.20) on 2014-08-13 20:00

kӥ`` ȥåפ饤 ϥɥХåΥ`֤кԣ Louis 륤????ȥФФ٤ʤȤ 1 ġ1983 ʡ Louis ????ȥΥץȺeΥ֥ɤκˤ뤳Τ褦ʺAĤᡢꥫѨϡηdzĤʥץ饤٩` åȤΥƥȤΥꥹȤΌgװgʥ쥬å? ????ȥ ? åסŤӑޤ1987 ΤۤȤ Louis ????ȥӻämuƷ LVMH ǤäƤⱣ֤һ id `ɤؤޤ
http://www.kostel.si/hg01/casio/index.html

#976 By http://www.kostel.si/hg01/casio/index.html (192.187.115.140|192.187.115.140) on 2014-08-06 17:23

<a hrefs="http://www.radiobounce.com/%E7%A9%BA%E6%B0%97%E6%B8%85%E6%B5%84%E6%A9%9F-%E9%96%A2%E9%80%A3%E7%94%A8%E5%93%81-c-7.html">󥭥` ՚囷C vBƷ</a>

#975 By http://www.keithcolvin.com/ (192.187.108.250|192.187.108.250) on 2014-07-29 03:18

<a href="http://www.lolwow.com/%E3%82%B5%E3%83%9E%E3%83%B3%E3%82%B5%E3%82%BF%E3%83%90%E3%82%B5-samantha-thavasa-c-514.html">Samantha Thavasa Deluxe</a>

#974 By http://www.laiamarull.com/%E3%83%A9%E8%A1%8C-c-107_116.html (216.244.77.226|216.244.77.226) on 2014-07-08 12:38

<a href="http://www.optimumwebs.com/%E3%83%AA%E3%83%A2%E3%83%AF-rimowa-c-166.html"> ȥѩ`å</a>

#973 By http://www.chinaabd.com/%E3%81%9D%E3%81%AE%E4%BB%96-c-67.html (192.187.108.250|192.187.108.250) on 2014-07-01 15:25

<a href="http://www.tobymadigan.com/%E3%82%BF%E3%83%95-tough-c-19.html"> GOLDEN STAMPS</a>

#972 By http://www.henrysgelato.com/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B5%E3%83%AA%E3%83%BC-kanmi-c-20_40.html (216.244.80.58|216.244.80.58) on 2014-06-25 21:54

<a href="http://www.theworldallaround.com/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B5%E3%83%AA%E3%83%BC-c-149_152.html">MARC BY MARC JACOBS ` ԥ</a>

#971 By http://www.kingphuk.com/ (216.244.80.58|216.244.80.58) on 2014-06-24 21:26

<a href="http://www.santjaume.net/%E3%83%90%E3%83%AC%E3%83%B3%E3%82%B7%E3%82%A2%E3%82%AC-balenciaga-c-1.html">http://www.santjaume.net/%E3%83%90%E3%83%AC%E3%83%B3%E3%82%B7%E3%82%A2%E3%82%AC-balenciaga-c-1.html</a>

#970 By http://www.walker-house.com/ (216.244.80.58|216.244.80.58) on 2014-06-24 12:16

<a href="http://www.luisnarino.com/%E3%83%AA%E3%83%A2%E3%83%AF-rimowa-c-146.html">RIMOWA TOPAS PREMIUM ȥѩ`ץߥ</a>

#969 By http://www.colosseum-revue.com/%E3%82%B3%E3%83%AB%E3%83%9C-corbo-c-122.html (216.244.80.58|216.244.80.58) on 2014-06-17 22:22

<a href="http://www.taishingintl.com/%E3%83%98%E3%83%AC%E3%83%B3%E3%82%AB%E3%83%9F%E3%83%B3%E3%82%B9%E3%82%AD%E3%83%BC-helen-kaminski-%E3%83%90%E3%83%83%E3%82%B0-c-34_36.html">Хå</a>

#968 By http://www.coltecind.com/%E3%83%99%E3%83%AB%E3%83%88-%E3%81%9D%E3%81%AE%E4%BB%96-c-72_73.html (192.187.108.250|192.187.108.250) on 2014-06-10 00:15

<a href="http://www.gros-seins-france.com/%E3%82%BB%E3%82%A4%E3%82%B3%E3%83%BC-%E3%83%AF%E3%82%A4%E3%82%A2%E3%83%BC%E3%83%89-%E3%83%AF%E3%82%A4%E3%82%A2%E3%83%BC%E3%83%89-%E3%83%AC%E3%83%87%E3%82%A3%E3%83%BC%E3%82%B9-c-84_93.html">磻` </a>

#967 By http://www.netky.net/%E3%83%AA%E3%83%A2%E3%83%AF-rimowa-c-76.html (192.187.108.250|192.187.108.250) on 2014-06-09 14:06

<a href="http://www.goodthyme.net/citizen-attesa%E3%80%80%E3%82%A2%E3%83%86%E3%83%83%E3%82%B5-c-150_155.html">ATTESAƥå</a>

#966 By http://www.llpdesigns.com/%E3%83%AB%E3%82%A2%E3%83%BC%E3%82%A8%E3%82%AE-%E3%81%9D%E3%81%AE%E4%BB%96-c-149_161.html (192.187.108.250|192.187.108.250) on 2014-06-06 11:36

<a href="http://www.javasoftware.org/%E3%81%9D%E3%81%AE%E4%BB%96-%E8%85%95%E6%99%82%E8%A8%88-c-4.html"> rӋ ?????󥹥󥿥</a>

#965 By http://www.handmade-wallpaper.com/%E3%83%80%E3%82%B3%E3%82%BF-dakota-c-39.html (192.187.108.250|192.187.108.250) on 2014-06-05 20:58

<a href="http://www.antiwine.com/dolce%E2%96%A1gabbana%E3%80%80%E3%83%89%E3%83%AB%E3%83%81%E3%82%A7%E2%96%A1%E3%82%AC%E3%83%83%E3%83%90%E3%80%96%E3%83%8A-c-319.html">DOLCEGABBANAɥ????åС</a>

#964 By http://www.stefanracz.com/ (192.187.108.250|192.187.108.250) on 2014-06-04 01:25

<a href="http://www.topflitetravel.com/%E5%AF%9D%E5%85%B7%E5%B8%83%E5%9B%A3-c-2.html">޾? </a>

#963 By http://www.sport-pony.com/%E3%82%BF%E3%82%B0%E3%83%9B%E3%82%A4%E3%83%A4%E3%83%BC-%E8%85%95%E6%99%82%E8%A8%88-%E3%83%AA%E3%83%B3%E3%82%AF-c-47_90.html (192.187.108.250|192.187.108.250) on 2014-06-03 00:50

<a href="http://www.libarter.com/bbr%E3%83%80%E3%82%A4%E3%83%AFbr%E3%80%80%E3%83%98%E3%83%A9%E3%83%90%E3%83%83%E3%82%B0%EF%BC%88d%EF%BC%89-herabagd-50%EF%BC%88d%EF%BC%89brdaiwab-%E7%B5%8C%E5%85%B8%EF%BC%8C%E6%BF%80%E5%AE%89-sac-7125.html">Хåؼ</a>

#962 By http://www.llpdesigns.com/%E3%83%A9%E3%82%A4%E3%83%B3-%E9%81%93%E7%B3%B8-c-172_176.html (192.187.108.250|192.187.108.250) on 2014-05-30 17:14

<a href="http://www.andyzermanski.com/%E3%82%AA%E3%83%86%E3%82%A3%E3%82%A2%E3%82%B9-otias-c-296.html">ƥ ܥǥХå</a>

#961 By http://www.asianx-treme.com/%E3%83%80%E3%82%B3%E3%82%BF-dakota-black-label-c-107.html (192.187.108.250|192.187.108.250) on 2014-05-19 01:29

<a href="http://www.harleylawyer.com/%E3%83%96%E3%83%AA%E3%83%BC%E3%83%95%E3%82%A3%E3%83%B3%E3%82%B0-briefing-c-105.html">֥`ե FLIGHT LIGHT</a>

#960 By http://www.theonlinepharmacist.com/%E3%82%B8%E3%83%BC%E3%83%B3%E3%82%BA-%E3%82%B9%E3%82%BF%E3%82%B8%E3%82%AA%E3%83%80%E3%83%AB%E3%83%81%E3%82%B6%E3%83%B3-c-37_47.html (192.187.108.250|192.187.108.250) on 2014-05-15 22:48

<a href="http://www.justrhysism.com/%E3%82%A8%E3%83%BC%E3%82%B9%E8%A3%BD%E5%93%81-%E3%83%97%E3%83%AD%E3%83%86%E3%82%AB-proteca-%E7%AD%89-c-44.html">`ɥȥ٥`</a>

#959 By http://www.junonsoft.com/ (192.187.108.250|192.187.108.250) on 2014-05-15 20:22

#958 By (157.100.118.94|95.211.218.103, 157.100.118.94) on 2014-04-01 07:23

ขอบคุณมากๆ สำหรับความรู้ดีๆ ขอบคุณคร๊าบบ
ผุ้เริ่มต้นเขียนเว็บ

#957 By ดิษลาดพร้าว (124.120.247.209|124.120.247.209) on 2014-02-27 09:45

Hello! bbgedda interesting bbgedda site! I'm really like it! Very, very bbgedda good!

#956 By (178.202.255.59|178.202.255.59) on 2014-01-29 17:55

Hello! dfkbccb interesting dfkbccb site! I'm really like it! Very, very dfkbccb good!

#955 By (117.102.121.3|117.102.121.3) on 2014-01-29 17:55

Hello! cggabgc interesting cggabgc site! I'm really like it! Very, very cggabgc good!

#954 By (46.4.114.75|46.4.114.75) on 2014-01-29 17:54

"Take a seat, and try one of these cigars," he said. "We are anxious to know how you managed it. Will you have some whiskey and water?"
ȥک` rӋ http://www.siro.co.jp/diarypro/data/katespade1.php

#953 By ȥک` rӋ (142.4.209.55) on 2013-11-14 08:03

Exist like you ended up succumbing simply because everyone happen to be irregardless.

#952 By hogan donna (27.153.230.234) on 2013-11-13 16:02

http://siroccoresort.com/gagawatch.html <a href="http://siroccoresort.com/gagawatch.html">ߥrӋ</a> v뤳ȶयޤƤ롣

#951 By ` ؔ ˚ (27.159.215.150) on 2013-11-13 07:17

˚ݥǥʩ`<a href="http://www.qcproperty.com/åɥ--c-121/">åɥ ȥå</a> http://www.qcproperty.com/åɥ--c-121/

#950 By եåץ`ǥ٩` ֥쥹 (120.43.26.196) on 2013-11-13 05:53

But this is sheer madness, I answered.
` http://kagu-syokunin.com/blog/data/coach5.php

#949 By ` (182.91.30.207) on 2013-11-13 03:02

<a href="http://www.antonellescheeseshop.com/֥륬-󥰣ָ݆-c-85/">֥륬 ˚</a> ˚ݵnhttp://www.antonellescheeseshop.com/֥륬-󥰣ָ݆-c-85/

#948 By åۤؔ (198.27.85.113) on 2013-11-13 02:28

<a href="http://www.maxinefrutkin.com/">ĥ </a> ˚Ʒhttp://www.maxinefrutkin.com/

#947 By ƥ rӋ (198.27.85.113) on 2013-11-12 22:20

<a href="http://www.fantasticrealm.com/">å ǥȥ</a> vԔߤĤˤϡhttp://www.fantasticrealm.com/

#946 By 󥯥` (198.27.85.113) on 2013-11-12 20:20

It should not be utilized as an alternative choice to medical-related assistance, verdict and also medication.

#945 By scarpe hogan interactive (27.159.192.6) on 2013-11-12 13:23

~һ<a href="http://reebokstore.pulsenights.com/">`ܥå ` 饷å</a> http://reebokstore.pulsenights.com/

#944 By ߥΕrӋ (27.159.215.150) on 2013-11-12 11:30

<a href="http://www.rembrandtaruba.com/iwc-ݥȥ`-c-83/">IWC ݥȥ` ٥</a> ȡQhttp://www.rembrandtaruba.com/iwc-ݥȥ`-c-83/

#943 By Mbt imara (198.27.85.113) on 2013-11-12 07:25

<a href="http://loeweshop.aikara.jp/"> Хå</a> Јhttp://loeweshop.aikara.jp/

#942 By ugg饷åȩ`ͥө` (120.43.27.219) on 2013-11-12 02:13

<a href="http://www.dcbicyclestations.com/]ɥ`-ީ`-14۩`-c-94/">ɥ` ީ` 14۩` ֩`</a> ʤ顢http://www.dcbicyclestations.com/ ljӤƤ룡

#941 By ɥ` ީ` 14۩` ֩` (198.27.85.113) on 2013-11-12 00:10

ǥ jeremy scott ˩`` ץåȥå㥱å 1242
ǥ SS 80s http://www.narity.sakura.ne.jp/ad.php?list=19

#940 By ǥ SS 80s (198.100.144.30) on 2013-11-11 07:42

˥`Х ` SM729 EE SM13 DEEP BLUE(DB) 4611
˥`Х http://nekogun.sakura.ne.jp/newblance.php

#938 By ˥`Х (198.100.144.30) on 2013-11-11 06:25

Щ` JACK PURCELL MERINO-WOOL åѩ` Υ` TURQUOISE 4298
Щ` CANVAS ALL STAR http://www.cnfo-niigatakensanyasou.or.jp/data/converse.php?list=6

#939 By Щ` CANVAS ALL STAR (198.100.144.30) on 2013-11-11 06:25

http://ralphlauren-bag.iyashi-group.jp/ <a href="http://ralphlauren-bag.iyashi-group.jp/">ե` n</a> Lj

#937 By ȥؔ (120.43.30.93) on 2013-11-11 06:13

Ӥ˚ݤF<a href="http://timberlandroll.bipas.org/">ƥЩ` ֩` </a> http://timberlandroll.bipas.org/

#936 By å rӋ ǥ` (120.43.30.93) on 2013-11-11 01:20

<a href="http://www.jp-tr.com/uggs/index.asp?id=449">ugg モカシン 偽物,アグ クラシックショート,アグムートンブーツ通販</a>
新しいデザインのミュウミュウ パンプス http://neuneun.com/amazon/miumiu/jpnews.php?product_id=86/

#935 By 新しいデザインのミュウミュウ パンプス (188.165.255.124) on 2013-11-10 07:58

ʤ<a href="http://rolexshop.rhofundsinvestor.com/">å rӋ </a> http://rolexshop.rhofundsinvestor.com/ ǴäƤ롣

#934 By ` (110.89.26.77) on 2013-11-09 20:22

󥺥ޥߥåȫ2ɫ(1001683)쥶``ץ󥷥`ȥ֩`ĥ֩`ƥ󥯥֩` 3907
UGG ֩` http://www.sagaetaxi.com/ugg.php?list=3

#933 By UGG ֩` (182.91.156.127) on 2013-11-09 03:17

ߥ奦ߥ奦 ۤ LؔATELASSE' LUXޥȥåPALISSANDRO֥饦ϵ 3281
ߥ奦ߥ奦 `ۥ`Хå` http://www.kensetsu.or.jp/miumiu.php?miumiu=9

#932 By ߥ奦ߥ奦 `ۥ`Хå` (182.91.156.127) on 2013-11-09 03:17

xƷ|<a href="http://brown-scofield.com/featherdress.html">ʥ` ǥ`</a> http://brown-scofield.com/featherdress.html

#931 By ǥ٥ƥ (120.33.220.3) on 2013-11-08 01:43