ดูว่าช่องว่างสีขาวใน HTML ได้รับการปฏิบัติตามเบราว์เซอร์อย่างไร
ถ้าคุณเป็นนักออกแบบเว็บเริ่มต้นหนึ่งในหลาย ๆ เรื่องที่คุณต้องทำความเข้าใจในช่วงต้นคือวิธีที่เบราว์เซอร์เว็บเบราว์เซอร์จัดการกับพื้นที่สีขาวในโค้ดของไซต์
แต่น่าเสียดายที่วิธีที่เบราว์เซอร์จัดการพื้นที่สีขาวจะไม่ง่ายในตอนแรกโดยเฉพาะอย่างยิ่งหากคุณเข้าสู่ HTML และเปรียบเทียบกับพื้นที่สีขาวที่ได้รับการจัดการในโปรแกรมประมวลผลคำซึ่งคุณอาจคุ้นเคยมากขึ้น
ในซอฟต์แวร์ประมวลผลคำคุณสามารถเพิ่มระยะห่างหรือแท็บต่างๆในเอกสารได้และระยะห่างดังกล่าวจะปรากฏในการแสดงเนื้อหาของเอกสาร นี่ไม่ใช่กรณีที่เป็น HTML หรือกับหน้าเว็บ ดังนั้นการเรียนรู้ว่าพื้นที่สีขาวเป็นจริงการจัดการโดยเว็บเบราเซอร์เป็นสิ่งสำคัญมาก
ระยะห่างในการพิมพ์
ในซอฟต์แวร์ประมวลผลคำสามหลักอักขระพื้นที่สีขาวคือพื้นที่แท็บและกลับรถ การกระทำแต่ละอย่างในลักษณะที่แตกต่างกัน แต่ในรูปแบบ HTML เบราว์เซอร์จะทำให้พวกเขาเหมือนกันทุกประการ ไม่ว่าคุณจะวางช่องว่างหนึ่งหรือ 100 ช่องในมาร์กอัพ HTML ของคุณหรือผสมระยะห่างของคุณกับแท็บและการแสดงผลของการรับส่งข้อความทั้งหมดจะถูกควบแน่นลงไปในช่องว่างหนึ่งเมื่อเพจแสดงผลโดยเบราว์เซอร์ ในศัพท์การออกแบบเว็บนี้เรียกว่าการยุบพื้นที่สีขาว คุณไม่สามารถใช้แป้นเว้นระยะทั่วไปเหล่านี้เพื่อเพิ่มช่องว่างในเว็บเพจได้เนื่องจากเบราว์เซอร์ยุบช่องว่างหลายช่องว่างลงในช่องเดียวเมื่อแสดงผลในเบราว์เซอร์
ทำไมจึงมีคนใช้ Tabs?
โดยปกติเมื่อผู้คนใช้แท็บในเอกสารข้อความพวกเขาใช้พวกเขาสำหรับเหตุผลรูปแบบหรือเพื่อให้ได้ข้อความที่จะย้ายไปยังสถานที่หนึ่งหรือจะเป็นระยะทางหนึ่งจากองค์ประกอบอื่น ในการออกแบบเว็บคุณไม่สามารถใช้อักขระพื้นที่ดังกล่าวเพื่อให้ได้รูปแบบภาพหรือความต้องการรูปแบบ
ในการออกแบบเว็บการใช้อักขระเว้นวรรคในโค้ดจะหมดจดเพื่อความสะดวกในการอ่านรหัสนั้น นักออกแบบเว็บและนักพัฒนาซอฟต์แวร์มักใช้แท็บเพื่อป้อนโค้ดย่อเพื่อให้สามารถมองเห็นว่าองค์ประกอบใดเป็นองค์ประกอบย่อยอื่น ๆ แต่ส่วนที่เยื้องไม่ได้ส่งผลต่อรูปแบบภาพของหน้าเว็บ สำหรับการเปลี่ยนแปลงโครงร่างภาพที่ต้องการคุณจะต้องหันไปใช้ CSS (cascading styles sheets)
ใช้ CSS เพื่อสร้างแท็บ HTML และระยะห่าง
เว็บไซต์วันนี้สร้างขึ้นด้วยการแยกโครงสร้างและสไตล์ โครงสร้างของเพจจะถูกจัดการโดย HTML ขณะที่สไตล์ถูกกำหนดโดย CSS ซึ่งหมายความว่าเพื่อสร้างระยะห่างหรือบรรลุรูปแบบบางอย่างคุณควรหันมาใช้ CSS และไม่พยายามเพิ่มตัวอักษรระยะห่างลงในโค้ด HTML
หากคุณกำลังพยายามใช้ แท็บ เพื่อสร้างคอลัมน์ของข้อความคุณสามารถใช้
หากข้อมูลที่คุณวางไว้คือข้อมูลแบบตารางคุณสามารถใช้ตารางเพื่อจัดตำแหน่งข้อมูลตามที่ต้องการได้ ตารางมักจะได้รับการลงโทษที่ไม่ดีในการออกแบบเว็บเพราะถูกทำร้ายเป็นเครื่องมือจัดรูปแบบที่แท้จริงมาเป็นเวลาหลายปีแล้ว แต่ตารางยังคงใช้ได้อย่างสมบูรณ์ถ้าเนื้อหาของคุณมีข้อมูลตารางดังกล่าวข้างต้น
ขอบเศษส่วนและข้อความเยื้อง
วิธีที่พบมากที่สุดในการสร้างระยะห่างด้วย CSS คือการใช้สไตล์ CSS ต่อไปนี้:
- ขอบ
- การขยายความ
- ข้อความเยื้อง
ตัวอย่างเช่นคุณสามารถเยื้องบรรทัดแรกของย่อหน้าเช่นแท็บที่มี CSS ต่อไปนี้ (โปรดทราบว่านี่ถือว่าย่อหน้าของคุณมีแอตทริบิวต์ class ของ "first" ที่แนบมาด้วย):
p.first {
text-indent: 5em;
}
ย่อหน้านี้จะเว้นไว้ประมาณ 5 ตัวอักษร
นอกจากนี้คุณยังสามารถใช้คุณสมบัติ margin หรือ padding ใน CSS เพื่อเพิ่มระยะห่างที่ด้านบนด้านล่างซ้ายหรือขวา (หรือชุดค่าผสมของด้านต่างๆ) ขององค์ประกอบ ในท้ายที่สุดคุณสามารถบรรลุระยะห่างที่ต้องการได้โดยเปลี่ยนเป็น CSS
การย้ายข้อความมากกว่าหนึ่งพื้นที่โดยไม่ใช้ CSS
ถ้าสิ่งที่คุณต้องการก็คือให้ย้ายเนื้อที่มากกว่าหนึ่งช่องจากรายการก่อนหน้านี้คุณสามารถใช้พื้นที่ที่ไม่ถูกทำลาย
หากต้องการใช้พื้นที่ที่ไม่หยุดนิ่งคุณสามารถเพิ่ม & nbsp; หลายครั้งเท่าที่คุณต้องการในมาร์กอัป HTML ของคุณ
ตัวอย่างเช่นถ้าคุณต้องการย้ายคำห้าช่องว่างเหนือคุณสามารถเพิ่มข้อมูลต่อไปนี้ก่อนคำ
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML เคารพสิ่งเหล่านี้และจะไม่ยุบลงไปในพื้นที่เดียว อย่างไรก็ตาม นี่ถือเป็นการปฏิบัติที่น่าสงสารมาก เนื่องจากมีการเพิ่มมาร์กอัป HTML พิเศษลงในเอกสารเพื่อให้บรรลุความต้องการของเค้าโครงเท่านั้น อ้างถึงการแบ่งโครงสร้างและสไตล์ดังกล่าวคุณควรหลีกเลี่ยงการเพิ่มช่องว่างที่ไม่ทำลายเพื่อให้ได้ผลรูปแบบที่ต้องการและควรใช้ขอบ CSS และช่องว่างแทน