สร้างช่องว่างและการแยกทางกายภาพขององค์ประกอบใน HTML ด้วย CSS
การสร้างช่องว่างและการแยกทางกายภาพขององค์ประกอบใน HTML อาจเป็นเรื่องยากที่จะเข้าใจสำหรับนักออกแบบเว็บไซต์เริ่มต้น เนื่องจาก HTML มีพร็อพเพอร์ตี้ที่เรียกว่า "การยุบช่องว่าง" ไม่ว่าคุณจะพิมพ์ 1 สเปซหรือ 100 ในโค้ด HTML เว็บเบราเซอร์จะยุบช่องว่างเหล่านี้ลงไปในพื้นที่เดียวเพียงอย่างเดียว ซึ่งแตกต่างจากโปรแกรมเช่น Microsoft Word ซึ่งช่วยให้ผู้สร้างเอกสารสามารถเพิ่มช่องว่างหลายช่องเพื่อแยกคำและองค์ประกอบอื่น ๆ ของเอกสารนั้น
นี่ไม่ใช่วิธีที่เวบไซต์ออกแบบเว้นวรรค
ดังนั้นคุณจะเพิ่ม whitespaces ใน HTML ที่แสดงบน หน้าเว็บได้ อย่างไร? บทความนี้จะตรวจสอบบางวิธี
ช่องว่างใน HTML ด้วย CSS
วิธีที่ต้องการเพิ่มช่องว่างใน HTML ของคุณคือ Cascading Style Sheets (CSS) ควรใช้ CSS เพื่อเพิ่มมุมมองภาพของเว็บเพจและเนื่องจากระยะห่างเป็นส่วนหนึ่งของลักษณะการออกแบบภาพของหน้าเว็บ CSS จึงเป็นที่ที่คุณต้องการให้ทำ
ใน CSS คุณสามารถใช้คุณสมบัติ margin หรือ padding เพื่อเพิ่มพื้นที่รอบ ๆ elements ได้ นอกจากนี้คุณสมบัติ text-indent เพิ่มเนื้อที่ว่างที่ด้านหน้าของข้อความเช่นสำหรับการเยื้องย่อหน้า
นี่คือตัวอย่างของวิธีการใช้ CSS เพื่อเพิ่มช่องว่างด้านหน้าของย่อหน้าทั้งหมดของคุณ เพิ่ม CSS ต่อไปนี้ลงในสไตล์ชีต ภายนอก หรือ ภายใน ของคุณ:
p {
text-indent: 3em;
}
ช่องว่างใน HTML: ภายในข้อความของคุณ
ถ้าคุณเพียงแค่ต้องการเพิ่มพื้นที่ว่างลงในข้อความของคุณคุณสามารถใช้พื้นที่ที่ไม่ทำลาย
อักขระนี้ทำหน้าที่เหมือนกับอักขระพื้นที่มาตรฐานเท่านั้นไม่ยุบภายในเบราว์เซอร์
นี่คือตัวอย่างของวิธีการเพิ่มห้าช่องว่างภายในบรรทัดของข้อความ:
ข้อความนี้มีช่องว่างพิเศษภายในช่องว่าง 5 ช่อง
ใช้ HTML:
ข้อความนี้มี & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; มีช่องว่างภายในอีก 5 ช่อง
คุณยังสามารถใช้แท็ก
เพื่อเพิ่มช่วงห่างบรรทัด
ประโยคนี้มีการแบ่งบรรทัดห้าบรรทัดเมื่อสิ้นสุดการทำงาน
ทำไมการเว้นวรรคใน HTML เป็นความคิดที่ไม่ดี
แม้ว่าตัวเลือกเหล่านี้จะทำงานได้ดี แต่ส่วนช่องว่างที่ไม่มีการทำลายจะเพิ่มระยะเว้นวรรคกับข้อความของคุณและเส้นแบ่งจะเพิ่มระยะเว้นวรรคข้างใต้ย่อหน้าที่แสดงไว้ด้านบนนี่ไม่ใช่วิธีที่ดีที่สุดในการสร้างระยะห่างในหน้าเว็บของคุณ การเพิ่มองค์ประกอบเหล่านี้ลงใน HTML จะเพิ่มข้อมูลภาพลงในโค้ดแทนการแยกโครงสร้างของเพจ (HTML) ออกจากรูปแบบภาพ (CSS) แนวทางปฏิบัติที่ดีที่สุดบอกว่าควรแยกเหตุผลเหล่านี้ออกด้วยเหตุผลหลายประการรวมทั้งความสะดวกในการอัปเดตในอนาคตรวมถึงขนาดไฟล์โดยรวมและประสิทธิภาพของหน้า
ถ้าคุณใช้สไตล์ชีตภายนอกเพื่อกำหนดรูปแบบและระยะห่างทั้งหมดของคุณจากนั้นเปลี่ยนสไตล์เหล่านั้นสำหรับทั้งไซต์เป็นเรื่องง่ายเนื่องจากคุณต้องอัปเดตสไตล์ชีทแบบนั้น
พิจารณาตัวอย่างด้านบนของประโยคที่มีแท็ก 5 แท็กตอนท้ายของประโยค หากต้องการเว้นวรรคที่ด้านล่างของทุกย่อหน้าคุณจะต้องเพิ่มโค้ด HTML ลงในทุกย่อหน้าในไซต์ทั้งหมดของคุณ นั่นคือจำนวนเงินที่พอสมควรของมาร์คอัปพิเศษซึ่งจะทำให้หน้าเว็บของคุณพองตัวได้
นอกจากนี้หากคุณตัดสินใจลงถนนว่าระยะห่างนี้มากเกินไปหรือน้อยเกินไปและคุณต้องการเปลี่ยนแปลงเล็กน้อยคุณจะต้องแก้ไขย่อหน้าทุกย่อหน้าในเว็บไซต์ทั้งหมดของคุณ ไม่เป็นไรขอบคุณ!
แทนที่จะเพิ่มองค์ประกอบการเว้นวรรคเหล่านี้ลงในโค้ดของคุณให้ใช้ CSS
p {
padding-bottom: 20px;
}
บรรทัด CSS หนึ่งบรรทัดจะเพิ่มระยะเว้นวรรคระหว่างย่อหน้าของหน้าเว็บ ถ้าคุณต้องการเปลี่ยนระยะห่างดังกล่าวในอนาคตให้แก้ไขบรรทัดนี้ (แทนรหัสไซต์ทั้งหมดของคุณ) และคุณก็พร้อมที่จะไปแล้ว!
ตอนนี้ถ้าคุณต้องการเพิ่มพื้นที่เดียวในส่วนหนึ่งส่วนใดของเว็บไซต์ของคุณโดยใช้แท็ก
หรือพื้นที่ที่ไม่ทำลายเพียงจุดเดียวไม่ใช่จุดจบของโลก แต่คุณต้องระมัดระวัง
การใช้ตัวเลือกการเว้นวรรคระหว่าง HTML เหล่านี้อาจเป็นความลาดชันที่ลื่น ในขณะที่หนึ่งหรือสองคนอาจไม่ทำร้ายไซต์ของคุณหากคุณดำเนินการต่อไปตามเส้นทางดังกล่าวคุณจะพบปัญหาในหน้าเว็บของคุณ ในตอนท้ายคุณจะเปลี่ยน CSS เป็นระยะ ๆ HTML และเว็บเพจอื่น ๆ ที่ต้องการได้ดียิ่งขึ้น