เราทำอะไรกับ div ได้บ้าง?พื้นฐานลักษณะของ div นั้นเป็นเหมือนกล่องสองชั้น ซึ่งสามารถแบ่งออกได้เป็น margin กับ padding
โดย margin นั้นคือขอบของกรอบซึ่งปกติจะกำหนดหน่วยเป็น px แต่ถ้าตั้งค่าเป็น 0 ก็จะไม่มีขอบให้เห็น
ส่วน padding คือระยะรอบกรอบอีกชั้นหนึ่ง ที่ปกติใช้หน่วยเป็น px เหมือนกัน ซึ่งเราจะเห็นเป็นช่องเว้นว่างที่ล้อมรอบกรอบ
ในหน้า CSS เรากำหนด margin, padding และขนาด div ได้แบบนี้
#div1{
margin: 0;
padding: 0;
width:100px;
height:300px;
}
สำหรับ border นั้น เป็นการออกแบบกรอบซึ่งสามารถตั้งค่าได้หลายส่วน
border-width กำหนดขนาดกรอบ ปกติใช้หน่วย px
border-style กำหนดรูปแบบกรอบ none dotted dash solid groove
<div style="border-width:5px"> </div>
ถ้าเปรียบเทียบ div เป็นบ้าน.. margin ก็คือการกำหนดรั้วบ้าน และ padding ก็คือคูที่อยู่รอบบ้านซึ่งจะเว้นไม่ให้ไปติดกับขอบอื่น โดยมี border เป็นแบบดีไซน์ของรั้วอีกที
รายละเอียดเกี่ยวกับ margin
เวลาเราเขียนค่ากรอบ margin ทั้งหมด 4 ค่าแบบนี้
{margin: 10px 0 50px 0;
/*margin-top:10px;
margin-right:50;
margin-bottom:0;
margin-left:0;*/
}
* การใส่เครื่องหมาย /*ข้อความ*/ คร่อมไว้แบบนี้ใน CSS เป็นเหมือนการเขียน comment หรือ note เอาไว้เพื่อช่วยในการจดจำข้อมูลส่วนต่างๆ โดยสิ่งที่เราเขียนจะไม่ถูกแสดงในหน้าเวปค่ะ
ถ้าใส่ค่า margin แค่สองค่า จะมีค่าเท่ากับแกน x กับแกน y ถ้าใส่ค่าซ้ายด้านเดียว จะแสดงค่าเท่ากันทั้งซ้ายขวา
กรณีกำหนดค่าแกน y แล้วกำหนดค่าแกน x เป็น auto จะทำให้ div (กรอบ) นั้นมาอยู่ตรงกลาง = จัดมาอยู่กลางหน้าเว็บ
คำสั่งอื่นๆที่ใช้กับ div
overflow: auto; จะขึ้น scroll bar มาให้ดูในส่วนที่เลย div ออกไป
overflow: hidden; ส่วนที่เกินจากช่องจะซ่อน ไม่แสดง
white-space: nowrap; ทำให้ข้อความล้นออกมาจากกรอบเพราะไม่ตัดคำ
