ใช้พร็อพเพอร์ตี้ CSS Line-Height เพื่อรับระยะห่างบรรทัด CSS
เรียนรู้วิธีการใช้คุณสมบัติ CSS style height-height เพื่อส่งผลต่อระยะห่างของบรรทัดบนเว็บเพจของคุณ
ค่าของระยะห่างบรรทัด CSS
ระยะห่างระหว่างบรรทัด CSS ได้รับผลกระทบจากคุณสมบัติ CSS style height-line สถานที่แห่งนี้ใช้เวลาถึง 5 ค่าต่างกัน:
- ปกติ เบราเซอร์กำหนดค่าสำหรับระยะห่างของบรรทัดที่เกี่ยวข้องกับขนาดแบบอักษร โดยปกติจะเป็นขนาดตัวอักษรหรือใหญ่กว่าเล็กน้อย (เช่น 20%)
- สืบทอด: ควรเว้นระยะห่างบรรทัดจากระยะห่างบรรทัดขององค์ประกอบหลัก ดังนั้นถ้าคุณตั้งค่าความสูงบรรทัดของแท็ก body ของคุณให้ใหญ่กว่าขนาดตัวอักษร 30% และแท็กย่อหน้าภายในที่กำหนดให้สืบทอดมาพวกเขาจะมีความสูงบรรทัดสูงกว่าขนาดตัวอักษร 30%
- number: ถ้าค่า line-height ไม่มีหน่วยวัดก็ถือว่าเป็นตัวคูณกับขนาดตัวอักษรสำหรับความสูงของบรรทัด ดังนั้นเส้นความสูง 1.25 จะใหญ่กว่าขนาดตัวอักษร 25%
- ความยาว: ถ้าค่าเส้นความสูงมีหน่วยของการวัดนั่นคือจำนวนเงินที่แน่นอนของพื้นที่ที่ควรจะมีระหว่างบรรทัด ดังนั้น 1.25 มม. จะทำให้เส้นห่าง 1.25 มิลลิเมตร
- เปอร์เซ็นต์: ถ้าความสูงบรรทัดเป็นเปอร์เซ็นต์นั่นอาจเป็นเปอร์เซ็นต์ของขนาดแบบอักษร ดังนั้นความสูงเป็นเส้น 125% จะใหญ่กว่าขนาดตัวอักษร 25%
ค่าใดที่คุณควรใช้สำหรับระยะห่างบรรทัด CSS
ในกรณีส่วนใหญ่ทางเลือกที่ดีที่สุดสำหรับการเว้นระยะห่างระหว่างบรรทัดคือการปล่อยให้เป็นค่าเริ่มต้นหรือเป็น "ปกติ" นี่เป็นสิ่งที่อ่านได้มากที่สุดและไม่จำเป็นต้องให้คุณทำอะไรเป็นพิเศษ แต่การเปลี่ยนระยะห่างบรรทัดอาจทำให้ข้อความของคุณแตกต่างไป
ถ้า ขนาดแบบอักษร ของคุณ ถูกกำหนดเป็น เปอร์เซ็นต์หรือเปอร์เซ็นต์เราควรกำหนดเส้นความสูงของคุณด้วยวิธีนี้ นี่คือรูปแบบที่ยืดหยุ่นที่สุดของการเว้นบรรทัดเพราะจะช่วยให้ผู้อ่านปรับขนาดแบบอักษรของตนและทำให้อัตราส่วนดังกล่าวเท่ากับระยะห่างระหว่างบรรทัดของคุณ
ตั้งค่าความสูงของเส้นสำหรับแผ่นงานพิมพ์ที่มีจุด (จุด) จุดคือการวัดการพิมพ์และขนาดตัวอักษรของคุณควรอยู่ในจุดต่างๆเช่นกัน
ฉันไม่ชอบใช้ตัวเลือกจำนวนเนื่องจากฉันพบว่าผู้คนสับสนมากที่สุด หลายคนคิดว่าจำนวนนี้เป็นขนาดที่แน่นอนและทำให้พวกเขาใหญ่มาก ตัวอย่างเช่นคุณอาจตั้งค่าแบบอักษรไว้ที่ 14px จากนั้นให้คุณตั้งค่าความสูงของบรรทัดเป็น 14 ซึ่งจะทำให้เกิดช่องว่างขนาดใหญ่ระหว่างบรรทัดเนื่องจากระยะห่างบรรทัดถูกกำหนดเป็น 14 เท่า ของขนาดตัวอักษร
คุณควรใช้พื้นที่เท่าไรในการเว้นระยะห่างบรรทัดของคุณ
ดังที่ได้กล่าวมาแล้วผมขอแนะนำให้ใช้การเว้นระยะห่างของบรรทัดเริ่มต้นยกเว้นกรณีที่คุณมีเหตุผลเฉพาะในการเปลี่ยนแปลง การเปลี่ยนระยะห่างระหว่างบรรทัดอาจมีผลต่างกัน:
- ข้อความที่แน่นเกินไปอาจทำให้อ่านยาก แต่ช่องว่างขนาดเล็กอาจส่งผลต่ออารมณ์ของข้อความ ถ้าข้อความถูก scrunched ร่วมกันก็สามารถทำให้ความรู้สึกของข้อความที่ดูเหมือนเข้มขึ้นหรือตึงเครียดมากขึ้น
- ข้อความที่อยู่ไกลออกไปอาจเป็นเรื่องยากที่จะอ่าน แต่ช่องว่างกว้างทำให้ข้อความดูเหมือนไหลและของเหลวมากขึ้น
- การเปลี่ยนระยะห่างบรรทัดอาจทำให้ข้อความที่ไม่เหมาะสมในพื้นที่มีขนาดกะทัดรัดหรือใช้พื้นที่มากขึ้นในการออกแบบของคุณ