สำหรับเพื่อน ๆ ที่ชื่นชอบการบู๊สะบั้นหั่นแหลก เผชิญหน้ากันตรง ๆ กับปัญหา วิธีนี้น่าจะเป็นวิธีที่ท้าทาย และ เป็นการประเทืองปัญญาไปในตัว ลับสมองไปกับการเขียน CSS วิธีการเขียน Style ที่ใช้ได้กับ Netscape 4 และ Style ที่ไว้ใช้สำหรับ Modern Browser ตัวอื่น ๆ ร่วมกันทำได้โดย 4 เทคนิคที่ผมจะกล่าวถึงต่อไปนี้ (รอบนี้เอาวิธีที่ 1 ก่อนนะ)
[/caption]
การใช้ css แบบ External เป็นสิ่งที่ผมอยากจะแนะนำครับ เพราะความสะดวก และง่ายในการแก้ไข เฉพาะ ไฟล์ CSS นั้นๆ ไป ไม่ต้องมัวมาเกิดหน้าเว็บ แล้วเข้ามาแก้ กรณี Internal และแก้ในแถว กรณีเขียนแบบ Inline ท่านสามารถเปิด ไฟล์ .css
เมื่อไรก็ตามที่เราต้องการ Elements หรือวัตถุที่มากกว่า 2 ชิ้นขึ้นไปมาเรียงต่อ หรือนำมาชิดติดกัน margin ถือเป็นคำสั่งหนึ่งที่ใช้เว้นช่องว่าระยะห่างระหว่าง element ถึง element
คือ ถ้าเราเพิ่ม margin ให้กับ elements ใดๆ แล้ว ช่องว่างที่เกิดจากค่าของ margin นั้นจะเป็นพื้นที่ว่างเปล่า มองทะลุปรุโปร่งถึงข้างหลัง ตามขอบทุกๆ ด้านที่เราใส่ค่าเข้าไป และไม่แสดงพื้นหลังของ element และแสดงค่าจากในออกนอก ซึ่งไม่เหมือนกับการใช้ padding เพื่อกันข้อมูลออกจากขอบของ element ซึ่งจะกันเข้าข้างใน หรือจะให้ค่าจากนอกเข้าในนั่นเอง
การเขียน CSS มี 3 ลักษณะคือ Inline, Internal และ External
ถ้าหากเราต้องการ box ขนาด 500px padding 5px border 5px การเขียนคลาส สามารถเขียนได้ดังนี้
.pd {
width: 480px;
padding: 5px;
border: solid 5px #000;
}เราสามารถกำหนด ขอบใน หรือ padding ให้กับ HTML Element ได้ทั้ง 4 ด้าน ด้วยความกว้างแตกต่างกัน padding คือระยะห่างจากขอบในของ box model กับเนื้อหาข้างใน หรือ box ที่อยู่ข้างใน
การกำหนด padding กับ class ต้องนับรวมกันทั้งหมด ถือเป็นความกว้างเดียวกัน เช่น ถ้าเราจะสร้าง คลาส 1 คลาส ให้มีความกว้าง 500px ระยะห่างจากขอบซ้ายและขวา ฝั่งละ 5px หรือ padding ซ้าย-ขวา-บน-ล่าง 5px จะได้ดังนี้