SiamWebCity.com รับสร้างเว็บไซต์ครบวงจร
เลือกภาษา ภาษาอังกฤษ   
หน้าแรก
web
โปรโมทเว็บ
web
รับทำเว็บไซต์
web
สอนทำเว็บ
web
Domain 299บ.
web
ติดต่อเรา
web
 
รับทำเว็บไซต์ครบวงจร รับพัฒนาแอพพลิเคชั่น สำหรับ Facebook iPad iPhone Android รับอบรมการสร้างเว็บไซต์ โปรโมทเว็บไซต์ ดูแลเว็บไซต์ แก้ไขเว็บไซต์ : เริ่มต้นติดต่อที่เรา ที่เหลือเราเป็นผู้จัดการเพื่อท่าน : เราเป็นมากกว่าเครื่องมือที่ช่วยฝ่าวิกฤตเศรษฐกิจ
รายการ
เกี่ยวกับเรา
ทำไมต้องเลือกเรา
ผลงานที่ผ่านมา
เตรียมตัวก่อนทำเว็บ
รับดูแลเว็บไซต์
แอพ Facebook iPhone
โปรแกรมmlm สำเร็จรูป
เช่าโฮสติง
บริการหลังการขาย
เงื่อนไขการรับบริการ
ร่วมงานกับเรา
คำถามที่พบบ่อย
ติดต่อเรา

ฟรีบทความ
คู่มือการใช้งาน  คู่มือการใช้งาน
VDO สอน Dreamweaver  VDO สอน Dreamweaver
Bitcoin บิทคอยน์  Bitcoin บิทคอยน์
PHP MySQL  VDO  เบื้องต้น  PHP MySQL VDO เบื้องต้น
PHP MySQL  เกร็ดความรู้  PHP MySQL เกร็ดความรู้
jQuery  jQuery
HTML5  HTML5
ASP net   MS SQL  ASP net MS SQL
facebook app  facebook app
JSP  JSP
Oracle  Oracle
CSS  CSS
Google  Google
iphone ipad iphone itune ios  iphone ipad iphone itune ios
SEO  SEO
SQL Server  SQL Server
AJAX  AJAX
รดน้ำอัตโนมัติ  สปริงเกอร์  รดน้ำอัตโนมัติ สปริงเกอร์
คอมพิวเตอร์   อินเตอร์เน็ต  คอมพิวเตอร์ อินเตอร์เน็ต
JavaScripts  JavaScripts
cloud computing  cloud computing
xhtml  xhtml
Photoshop  Photoshop
RSS Feed  RSS Feed
wordpress  wordpress
Computer  Computer
MLM ขายตรง ขยายสายงาน  MLM ขายตรง ขยายสายงาน
NUTT's blog  NUTT's blog
ทีวีดิจิตอล DVB T2  ทีวีดิจิตอล DVB T2
Bootstrap CSS  Bootstrap CSS

รับสอน PHP, MySQL, HTML, CSS, Javascripts, FTP, Dreamweaver,PHPMyAdmin, Appserv, WMSEVER, php-Nuke , Joomla, SMF, Oscommerce, Phpbb, Paypal, Adwordsมาเรียนการสร้างเว็บกัน
บริการสอน แนะนำ Adwords , PHP, MySQL, HTML, FTP, SMF, PHPMyAdmin, Dreamweaver, Oscommerce, Photoshop, Flash...

test speed
Display Pagerank
ดูสถิติเว็บไซต์

Margin, Padding



CSS > Margin, Padding



PropertyDescriptionValues 
margin-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆauto
length
เช่น 5px, 5pt,5cm
margin-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ  
margin-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ  
margin-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ  
marginใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว  
padding-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ  
padding-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ  
padding-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ  
padding-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ  
paddingใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)  

Exampleถ้าไม่ได้ใช้้งาน margin และ padding
ข้อความข้างนอกด้านบน
<div style="border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px 
ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
</div>
ข้อความข้างนอกด้านล่าง 
Output 
ข้อความข้างนอกด้านบน
block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
ข้อความข้างนอกด้านล่าง

ลองมาดูต่อว่า... ถ้านำ margin และ padding มาใช้งานล่ะ 


Example การใช้งาน margin และ padding
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
<div style="margin:20px; padding:20px; border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง 
Output 
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
block นี้มี Border สีน้ำเงิน ขนาด 20px 
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง


ถ้ายังงงๆ ว่าตรงไหนคือ margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ 

 

Exampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน
<div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">
block นี้มี Border สีส้ม ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ 
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง 
Output 
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือ margin ด้านบน
block นี้มี Border สีส้ม ขนาด 2px 
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 30x นี่คือ margin ด้านล่าง

Exampleการใช้งาน padding ที่แต่ละด้านไม่เท่ากัน
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
<div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">
block นี้มี Border สีเขียว ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ 
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง 

Output 
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน
block นี้มี Border สีเขียว ขนาด 2px 
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง

Example อื่นๆ
h1 {margin: 10px}

Happy New Year

margin ทั้ง4 ด้านเป็น 10px

h1 {margin: 10px 2%}

Happy New Year

margin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสาร

h1 {margin: 10px 2% -10px}

Happy New Year

margin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px

h1 {margin: 10px 2% -10px auto}

Happy New Year

margin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำหนดตาม Browser

Exampleการใช้งานผสม Chapter 8-12
<html>
<head>

<style type="text/css">
.mixcode {
font: normal small-caps bold 16px Arial, Helvetica, sans-serif; 
color:#FF0033; 
text-align:center; 
text-decoration:underline; 
word-spacing:0.5em; 
background-color:#FBEFFC; 
border:2px dotted #FF6699; 
margin:20px; 
padding:20px
</style>

</head>

<body>
Hello all,
<div class="mixcode">Happy New Year 2009</div>
Hope you enjoy your stay here.
</body>
</html>
Output 
Hello all,
Happy New Year 2009
Hope you enjoy your stay here.


Short URL click! Facebook Share
<< Back : เข้าชม 7,907 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ webboard Seeding รับจ้างโพสต์ โปรโมทเว็บไซต์ webUB.com



รับทำเว็บไซต์, ทำเว็บ, สร้างเว็บไซต์, รับทำเว็บ, รับออกแบบเว็บ, รับเขียนเว็บ, ออกแบบเว็บ, เว็บดีไซน์, รับสร้างเว็บ, เขียนเว็บไซต์, เว็บ, บริษัท ทำเว็บ, บริษัท สร้างเว็บ, บริษัท ออกแบบเว็บ, บริษัท เขียนเว็บ, ผลงานเว็บ, โฮสติ้ง,Design,Web,เว็บ,เว็บ โฮสติ้ง,เว็ป,โฮสติ้ง ราคาถูก,เว็บไซต์,จดโดเมน,เว็บโฮสติ้ง,Web Download,Web PHP,Flash MX,Graphic Design,Search Engine, Web, Design, Web Host,Web Hosting,Web Page,เขียนเว็บ,เขียนเว็บไซต์,จัดทำเว็บ,จัดทำเว็บไซต์,ทำเว็บ,ทำเว็บไซต์, โปรโมทเว็บ,ฟรี เว็บ,รับเขียนเว็บ,รับทำเว็บ,รับทำเว็บไซต์,รับออกแบบเว็บ,รับออกแบบเว็บไซ ต์,เว็บ สำเร็จรูป,เว็บดีไซน์,เว็ปไซต์, สร้างเว็บ,สร้างเว็บไซต์,ออกแบบ เว็บไซต์,ออกแบบเว็บ,ออกแบบเว็บไซต์,เขียนโปรแกรม,บริการเว็บโฮสติ้ง,ประชา สัมพันธ์เว็บ,รับจัดทำเว็บไซต์,รับสร้างเว็บ,เว็บโปรแกรม,เว็บสวย, บริการจัดทำเว็บไซต์,บริษัทรับจัดทำเว็บไซต์,ให้บริการจัดทำเว็บไซต์, มีประสบการณ์การจัดทำเว็บไซต์, งานบริการเว็บไซต์,ผลงานการเว็บไซต์,ผลงานเว็บไซต์,เว็บไซต์,เว็บไซต์ ปรัชญา "พอเพียง",เว็บไซต์ราคาที่ยุติธรรม,เว็บไซต์ระบบมาตรฐาน,เว็บไซต์ทุกงาน, เว็บไซต์ธุรกิจ, โปรโมทเว็บ,ประชาสัมพันธ์เว็บ,เว็บ,ออกแบบเว็บ,เขียนโปรแกรม,สร้างเว็บ,ออก แบบเว็บไซต์,ทำเว็บ,เว็บสวย,เขียนเว็บไซต์,ทำเว็บไซต์,รับทำเว็บ,รับออกแบบ เว็บ,เขียนเว็บ,รับเขียนเว็บ,รับทำเว็บไซต์,รับจัดทำเว็บไซต์,เว็บโฮสติ้ง, จัดทำเว็บ,เว็บโปรแกรม,เว็บไซต์,เว็บดีไซน์,รับออกแบบเว็บไซต์,สร้างเว็บไซ ต์,เว็บ,จดโดเมน,บริการเว็บโฮสติ้ง,จัดทำเว็บไซต์,โปรแกรมคอมพิวเตอร์

รับทำเว็บไซต์ : โปรโมทเว็บไซต์ : รับเขียนโปรแกรม : สอนสร้างเว็บ : จด Domain name 299บ. : เช่า Hosting : บริการดูแลเว็บไซต์ : รับซื้อ ขาย Rolex : Sitemap.xml
สปริงเกอร์

ข้อสอบ คลังข้อสอบ ระบบข้อสอบ โปรแกรมข้อสอบ ฟรี Exam.in.th
เว็บไซต์ในเครือข่าย: SiamWebCity.com webUB.com EXAM.in.th ข้อสอบ.ไทย ไอเดียแต่งบ้าน homeEST.com
Copyright © 2009-2019 SiamWebCity.COM. ® All rights reserved. หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321
E-mail, Google Talk : admin [at] siamwebcity.com, Skype: SiamWebCity.com
ขึ้นไปด้านบน