ความสูงของเส้นขนาดตัวอักษรและแนวตั้งเป็นคุณลักษณะสำคัญสำหรับการตั้งค่าเค้าโครงขององค์ประกอบภายในบรรทัด คุณลักษณะทั้งสามนี้เป็นความสัมพันธ์ที่พึ่งพาซึ่งกันและกันและการเปลี่ยนระยะห่างระหว่างแถวและการตั้งค่าการจัดตำแหน่งแนวตั้งต้องใช้ความพยายามร่วมกัน เนื้อหาที่เกี่ยวข้องของขนาดตัวอักษรได้รับการแนะนำในรายละเอียดในแบบอักษร CSS บทความนี้ส่วนใหญ่จะแนะนำความสูงของเส้นและแนวตั้ง
ความสูงของสาย คำนิยามความสูงของเส้นความสูงของเส้นหมายถึงระยะห่างระหว่างเส้นเขตแดนของสายข้อความ ความสูงของสายจริงมีผลกระทบต่อองค์ประกอบในบรรทัดและเนื้อหาในบรรทัดอื่น ๆ เท่านั้นและไม่ส่งผลกระทบโดยตรงต่อองค์ประกอบระดับบล็อก นอกจากนี้คุณยังสามารถตั้งค่าความสูงบรรทัดสำหรับองค์ประกอบระดับบล็อก แต่ค่านี้จะมีผลกระทบเมื่อนำไปใช้กับเนื้อหาอินไลน์ขององค์ประกอบระดับบล็อก การประกาศความสูงบรรทัดในองค์ประกอบระดับบล็อกจะตั้งค่าความสูงของกล่องบรรทัดขั้นต่ำสำหรับเนื้อหาขององค์ประกอบระดับบล็อก
ค่า: <ความยาว> | <เปอร์เซ็นต์> | <Gumber> | ปกติ | สืบทอด
ค่าเริ่มต้น: ปกติ
นำไปใช้กับ: องค์ประกอบทั้งหมด
มรดก: ใช่
เปอร์เซ็นต์: ขนาดตัวอักษรสัมพันธ์กับองค์ประกอบ
คำว่าเพื่อให้เข้าใจถึงความสูงของเส้นในเชิงลึกคุณต้องเข้าใจคำศัพท์ทั่วไปเกี่ยวกับความสูงของสาย
พื้นที่เนื้อหาสำหรับองค์ประกอบที่ไม่ได้เปลี่ยนหรือเป็นส่วนหนึ่งของข้อความที่ไม่ระบุชื่อในบรรทัด, ขนาดตัวอักษรและตัวอักษร-ครอบครัวกำหนดความสูงของพื้นที่เนื้อหา ในตัวอักษรเพลงหากขนาดตัวอักษรขององค์ประกอบในแถวคือ 15px ความสูงของพื้นที่เนื้อหาคือ 15px; ในแบบอักษรอื่น ๆ ความสูงของพื้นที่เนื้อหาไม่เท่ากับขนาดตัวอักษร
เฟรมแบบอินไลน์พื้นที่เนื้อหารวมถึงระยะห่างของเส้นเท่ากับกล่องบรรทัดในบรรทัด หากขนาดตัวอักษรขององค์ประกอบที่ไม่ได้เปลี่ยนในแถวคือ 15px และความสูงของเส้นคือ 21px ความแตกต่างคือ 6px ตัวแทนผู้ใช้แบ่ง 6 พิกเซลเหล่านี้ออกเป็นสองและใช้ครึ่งหนึ่งไปที่ด้านบนและด้านล่างของพื้นที่เนื้อหาตามลำดับซึ่งให้บรรทัดภายในกล่อง
เมื่อความสูงของเส้นน้อยกว่าขนาดฟอนต์กล่องบรรทัดอินไลน์นั้นน้อยกว่าพื้นที่เนื้อหาจริง
กล่องสายกล่องแถวถูกกำหนดเป็นระยะห่างระหว่างด้านบนของกล่องด้านในแถวสูงสุดในแถวและด้านล่างของกล่องด้านในแถวต่ำสุดและด้านบนของแต่ละกล่องแถวถัดจากด้านล่างของกล่องแถวก่อนหน้า
คุณสมบัติกล่องระยะขอบด้านในขอบด้านนอกและเส้นขอบไม่ส่งผลกระทบต่อความสูงของเฟรมเส้นนั่นคือมันไม่ส่งผลกระทบต่อความสูงของเส้น
ขอบเขตขอบเขตขององค์ประกอบในบรรทัดถูกควบคุมโดยขนาดตัวอักษรแทนความสูงของเส้น
ระยะขอบจะไม่ถูกนำไปใช้กับด้านบนและด้านล่างขององค์ประกอบที่ไม่ได้เปลี่ยนในแถว
ระยะขอบซ้าย, ด้านซ้าย-ซ้ายชายแดนถูกนำไปใช้กับจุดเริ่มต้นขององค์ประกอบ; มาร์จิ้น-ขวา, แพ็นขวา, ขวา, ขวาถูกนำไปใช้กับส่วนท้ายขององค์ประกอบ
แทนที่องค์ประกอบการแทนที่องค์ประกอบภายในแถวต้องใช้ค่าความสูงของบรรทัดเพื่อจัดตำแหน่งองค์ประกอบที่ถูกต้องเมื่อจัดแนวในแนวตั้ง เนื่องจากค่าเปอร์เซ็นต์ของการจัดแนวแนวตั้งจะถูกคำนวณเมื่อเทียบกับความสูงของเส้นขององค์ประกอบ สำหรับการจัดแนวแนวตั้งความสูงของภาพนั้นไม่เกี่ยวข้องคีย์คือค่าของความสูงของเส้น
โดยค่าเริ่มต้นองค์ประกอบการเปลี่ยนแบบอินไลน์จะอยู่ที่พื้นฐาน หากคุณเพิ่มระยะขอบด้านในขอบด้านนอกหรือขอบไปยังองค์ประกอบทดแทนพื้นที่เนื้อหาจะถูกขยับขึ้น พื้นฐานขององค์ประกอบการเปลี่ยนเป็นพื้นฐานของกล่องแถวสุดท้ายในสตรีมปกติ เว้นแต่เนื้อหาขององค์ประกอบการแทนที่จะว่างเปล่าหรือค่าของแอตทริบิวต์ล้นตัวเองจะไม่ปรากฏให้เห็นในกรณีนี้พื้นฐานคือขอบด้านล่าง
แนวตั้ง คำนิยามแนวตั้งที่ใช้ในการตั้งค่าการจัดแนวแนวตั้งองค์ประกอบที่จัดเรียงตามแนวตั้งทั้งหมดจะส่งผลต่อความสูงของแถว
ค่า: พื้นฐาน | ย่อย | ซุปเปอร์ | ด้านบน | ข้อความด้านบน | กลาง | ด้านล่าง | ข้อความด้านล่าง <ความยาว> | <เปอร์เซ็นต์> | สืบทอด
ค่าเริ่มต้น: พื้นฐาน
นำไปใช้กับ: องค์ประกอบในบรรทัด, องค์ประกอบการเปลี่ยน, เซลล์ตาราง
มรดก: ไม่มี
เปอร์เซ็นต์: ความสูงของสายสัมพันธ์กับความสูงขององค์ประกอบ
[หมายเหตุ] ค่าเปอร์เซ็นต์ของการจัดแนวแนวตั้งใน IE7-Browser ไม่รองรับความสูงของทศนิยมแถวและเอฟเฟกต์การแสดงผลนั้นแตกต่างจากเบราว์เซอร์มาตรฐานเมื่อใช้พื้นฐาน, กลาง, ก้นข้อความ, ฯลฯ วิธีแก้ปัญหาที่ใช้กันทั่วไปคือการตั้งค่าการแสดงผล
CSS รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด