วิธีการวาดเส้นแนวตั้งเพื่อแยกข้อความ HTML จากภาพ

HTML ไม่ได้เสนอวิธีการแก้ปัญหาที่ชัดเจนสำหรับเส้นแนวตั้งเช่นเดียวกับเส้นแนวนอน - ซึ่งเทียบเท่ากับแนวตั้ง


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

1

ตั้งค่ารูปภาพของคุณภายในข้อความและเพิ่มแท็กแอตทริบิวต์ "style" ตัวอย่างเช่นโค้ด HTML สำหรับรูปภาพของคุณอาจมีลักษณะดังนี้:

2

กำหนดเส้นขอบภายในแอตทริบิวต์ "style" ตัวอย่างเช่นหากคุณต้องการให้เส้นขอบนำไปใช้กับรูปภาพทั้งหมด CSS จะมีลักษณะดังนี้:

นี่คือการตั้งค่าเส้นขอบแบบย่อ - ค่าแรกกำหนดความกว้างของเส้นขอบส่วนที่สองกำหนดประเภทของเส้นขอบและเส้นที่สามกำหนดสี เส้นขอบอาจเป็นเส้นประประหรือเป็นสองเท่า หรือคุณสามารถระบุเส้นขอบ 3-D เช่น groove, ridge, inset หรือ outset

หากคุณต้องการใช้เส้นขอบกับด้านใดด้านหนึ่งในการสร้างเส้นแนวตั้งที่แท้จริงคุณจะต้องใช้ "เส้นขอบซ้าย" หรือ "เส้นขอบขวา" แทน "เส้นขอบ"

3

เพิ่มช่องว่างภายในเพื่อสร้างช่องว่างระหว่างภาพและข้อความของคุณ หากคุณต้องการให้เส้นขอบห่างจากรูปภาพ 5 พิกเซลให้เพิ่ม "padding: 5px;" แท็กสไตล์ของคุณ คุณสามารถระบุช่องว่างภายในด้านเดียวโดยใช้ตัวอย่างเช่น "padding-left: 5px;" หากคุณต้องการสร้างช่องว่างระหว่างเส้นขอบและข้อความให้ใช้ระยะห่าง คุณจะต้องระบุ URL รูปภาพของคุณสำหรับแท็ก "src" เมื่อคุณรวมมันเข้าด้วยกันโค้ดของคุณอาจมีลักษณะดังนี้:

4

บันทึกและทดสอบ HTML ของคุณเพื่อยืนยันว่าเส้นขอบกำลังแสดงตามที่คุณต้องการ

โพสต์ยอดนิยม