ความเข้าใจที่ครอบคลุมเกี่ยวกับความสูงของเส้นและแนวตั้ง

ความสูงของเส้นขนาดตัวอักษรและแนวตั้งเป็นคุณลักษณะสำคัญสำหรับการตั้งค่าเค้าโครงขององค์ประกอบภายในบรรทัด คุณลักษณะทั้งสามนี้เป็นความสัมพันธ์ที่พึ่งพาซึ่งกันและกันและการเปลี่ยนระยะห่างระหว่างแถวและการตั้งค่าการจัดตำแหน่งแนวตั้งต้องใช้ความพยายามร่วมกัน เนื้อหาที่เกี่ยวข้องของขนาดตัวอักษรได้รับการแนะนำในรายละเอียดในแบบอักษร CSS บทความนี้ส่วนใหญ่จะแนะนำความสูงของเส้นและแนวตั้ง

ความสูงของเส้นความสูงของเส้นหมายถึงระยะห่างระหว่างเส้นเขตแดนของสายข้อความ ความสูงของสายจริงมีผลกระทบต่อองค์ประกอบในบรรทัดและเนื้อหาในบรรทัดอื่น ๆ เท่านั้นและไม่ส่งผลกระทบโดยตรงต่อองค์ประกอบระดับบล็อก นอกจากนี้คุณยังสามารถตั้งค่าความสูงบรรทัดสำหรับองค์ประกอบระดับบล็อก แต่ค่านี้จะมีผลกระทบเมื่อนำไปใช้กับเนื้อหาอินไลน์ขององค์ประกอบระดับบล็อก การประกาศความสูงบรรทัดในองค์ประกอบระดับบล็อกจะตั้งค่าความสูงของกล่องบรรทัดขั้นต่ำสำหรับเนื้อหาขององค์ประกอบระดับบล็อก

ค่า: <ความยาว> | <เปอร์เซ็นต์> | <Gumber> | ปกติ | สืบทอด

ค่าเริ่มต้น: ปกติ

นำไปใช้กับ: องค์ประกอบทั้งหมด

มรดก: ใช่

เปอร์เซ็นต์: ขนาดตัวอักษรสัมพันธ์กับองค์ประกอบ

เพื่อให้เข้าใจถึงความสูงของเส้นในเชิงลึกคุณต้องเข้าใจคำศัพท์ทั่วไปเกี่ยวกับความสูงของสาย

สำหรับองค์ประกอบที่ไม่ได้เปลี่ยนหรือเป็นส่วนหนึ่งของข้อความที่ไม่ระบุชื่อในบรรทัด, ขนาดตัวอักษรและตัวอักษร-ครอบครัวกำหนดความสูงของพื้นที่เนื้อหา ในตัวอักษรเพลงหากขนาดตัวอักษรขององค์ประกอบในแถวคือ 15px ความสูงของพื้นที่เนื้อหาคือ 15px; ในแบบอักษรอื่น ๆ ความสูงของพื้นที่เนื้อหาไม่เท่ากับขนาดตัวอักษร

พื้นที่เนื้อหารวมถึงระยะห่างของเส้นเท่ากับกล่องบรรทัดในบรรทัด หากขนาดตัวอักษรขององค์ประกอบที่ไม่ได้เปลี่ยนในแถวคือ 15px และความสูงของเส้นคือ 21px ความแตกต่างคือ 6px ตัวแทนผู้ใช้แบ่ง 6 พิกเซลเหล่านี้ออกเป็นสองและใช้ครึ่งหนึ่งไปที่ด้านบนและด้านล่างของพื้นที่เนื้อหาตามลำดับซึ่งให้บรรทัดภายในกล่อง

เมื่อความสูงของเส้นน้อยกว่าขนาดฟอนต์กล่องบรรทัดอินไลน์นั้นน้อยกว่าพื้นที่เนื้อหาจริง

กล่องแถวถูกกำหนดเป็นระยะห่างระหว่างด้านบนของกล่องด้านในแถวสูงสุดในแถวและด้านล่างของกล่องด้านในแถวต่ำสุดและด้านบนของแต่ละกล่องแถวถัดจากด้านล่างของกล่องแถวก่อนหน้า

ระยะขอบด้านในขอบด้านนอกและเส้นขอบไม่ส่งผลกระทบต่อความสูงของเฟรมเส้นนั่นคือมันไม่ส่งผลกระทบต่อความสูงของเส้น

ขอบเขตขอบเขตขององค์ประกอบในบรรทัดถูกควบคุมโดยขนาดตัวอักษรแทนความสูงของเส้น

ระยะขอบจะไม่ถูกนำไปใช้กับด้านบนและด้านล่างขององค์ประกอบที่ไม่ได้เปลี่ยนในแถว

ระยะขอบซ้าย, ด้านซ้าย-ซ้ายชายแดนถูกนำไปใช้กับจุดเริ่มต้นขององค์ประกอบ; มาร์จิ้น-ขวา, แพ็นขวา, ขวา, ขวาถูกนำไปใช้กับส่วนท้ายขององค์ประกอบ

การแทนที่องค์ประกอบภายในแถวต้องใช้ค่าความสูงของบรรทัดเพื่อจัดตำแหน่งองค์ประกอบที่ถูกต้องเมื่อจัดแนวในแนวตั้ง เนื่องจากค่าเปอร์เซ็นต์ของการจัดแนวแนวตั้งจะถูกคำนวณเมื่อเทียบกับความสูงของเส้นขององค์ประกอบ สำหรับการจัดแนวแนวตั้งความสูงของภาพนั้นไม่เกี่ยวข้องคีย์คือค่าของความสูงของเส้น

โดยค่าเริ่มต้นองค์ประกอบการเปลี่ยนแบบอินไลน์จะอยู่ที่พื้นฐาน หากคุณเพิ่มระยะขอบด้านในขอบด้านนอกหรือขอบไปยังองค์ประกอบทดแทนพื้นที่เนื้อหาจะถูกขยับขึ้น พื้นฐานขององค์ประกอบการเปลี่ยนเป็นพื้นฐานของกล่องแถวสุดท้ายในสตรีมปกติ เว้นแต่เนื้อหาขององค์ประกอบการแทนที่จะว่างเปล่าหรือค่าของแอตทริบิวต์ล้นตัวเองจะไม่ปรากฏให้เห็นในกรณีนี้พื้นฐานคือขอบด้านล่าง

แนวตั้งที่ใช้ในการตั้งค่าการจัดแนวแนวตั้งองค์ประกอบที่จัดเรียงตามแนวตั้งทั้งหมดจะส่งผลต่อความสูงของแถว

ค่า: พื้นฐาน | ย่อย | ซุปเปอร์ | ด้านบน | ข้อความด้านบน | กลาง | ด้านล่าง | ข้อความด้านล่าง <ความยาว> | <เปอร์เซ็นต์> | สืบทอด

ค่าเริ่มต้น: พื้นฐาน

นำไปใช้กับ: องค์ประกอบในบรรทัด, องค์ประกอบการเปลี่ยน, เซลล์ตาราง

มรดก: ไม่มี

เปอร์เซ็นต์: ความสูงของสายสัมพันธ์กับความสูงขององค์ประกอบ

[หมายเหตุ] ค่าเปอร์เซ็นต์ของการจัดแนวแนวตั้งใน IE7-Browser ไม่รองรับความสูงของทศนิยมแถวและเอฟเฟกต์การแสดงผลนั้นแตกต่างจากเบราว์เซอร์มาตรฐานเมื่อใช้พื้นฐาน, กลาง, ก้นข้อความ, ฯลฯ วิธีแก้ปัญหาที่ใช้กันทั่วไปคือการตั้งค่าการแสดงผล