คู่มือนี้จะสอนขั้นตอนการสร้างช่องว่างระหว่างสองลิงก์
มาเริ่มกันเลย!
จะให้ช่องว่างระหว่างสองลิงก์ใน HTML และ CSS ได้อย่างไร
เพื่อให้มีช่องว่างระหว่างสองลิงก์ ก่อนอื่น ให้เพิ่มลิงก์ที่จำเป็นในไฟล์ HTML
ขั้นตอนที่ 1: เพิ่มลิงก์ใน HTML
ใน HTML เราจะสร้างคอนเทนเนอร์โดยใช้แท็ก
HTML
< div >< เอ href = “https://linuxhint.com/create-html-file/” > จะสร้างไฟล์ HTML ได้อย่างไร? < / เอ >
< เอ href = “https://linuxhint.com/edit-html-file/” > จะแก้ไขไฟล์ HTML ได้อย่างไร? < / เอ >
< / div >
รูปภาพต่อไปนี้แสดงว่าลิงก์ถูกเพิ่มสำเร็จแล้ว:
ขั้นตอนที่ 2: จัดรูปแบบ Div & Link
ในขั้นตอนนี้ กำหนดรูปแบบ div และลิงก์โดยใช้ “ div ” ใน CSS เราจะปรับ padding เป็น “ 40px ” และกำหนดขนาดตัวอักษรของลิงค์เป็น “ ใหญ่ขึ้น ” ความสูงของ div ถูกกำหนดเป็น “ 150px ” และใช้คุณสมบัติพื้นหลังและตั้งค่าสีของ div เป็น “ สีดำ ” หลังจากนั้นให้ปรับความกว้างของเส้นขอบเป็น “ 5px ” สไตล์เป็น “ ประ ” และสีเป็น “ rgb(251, 255, 0) ”
CSS
div {การขยายความ : 40px ;
ขนาดตัวอักษร : ใหญ่ขึ้น ;
ความสูง : 150px ;
พื้นหลัง : สีดำ ;
ชายแดน : 5px ประ rgb ( 251 , 255 , 0 ) ;
}
โดยใช้รหัสด้านบน ผลลัพธ์ต่อไปนี้จะได้รับ อย่างที่คุณเห็น ทั้ง div และลิงก์มีสไตล์:
ขั้นตอนที่ 3: ให้ช่องว่างระหว่างสองลิงก์ในแนวนอน
เราสามารถให้ช่องว่างระหว่างสองลิงก์ในแนวนอนโดยใช้ HTML และ CSS ที่นี่ เราจะอธิบายทั้งสองวิธีทีละรายการ
วิธีที่ 1: การใช้ HTML
เพื่อให้มีช่องว่างระหว่างลิงก์โดยไม่ต้องเขียน CSS ภายนอก คุณสามารถใช้ ' ” ใน HTML ที่คุณต้องการสร้างพื้นที่ “ ” หมายถึงพื้นที่ที่ไม่ทำลาย ในไฟล์ HTML การเพิ่มหนึ่ง หมายถึงหนึ่งช่องว่าง หากคุณต้องการเพิ่มพื้นที่ ไม่ควรเพิ่ม ด้วยตนเองตามจำนวนช่องว่างที่ต้องการ
มาดูตัวอย่างเพื่อทำความเข้าใจแนวคิดที่ระบุไว้กันเถอะ!
ตัวอย่าง
ที่นี่เราจะเขียนสี่ครั้ง “ ” เพื่อสร้างช่องว่างหลังจากลิงค์แรกในลักษณะที่ลิงค์ที่สองจะปรากฏหลังจากสี่ช่องว่าง
HTML
< div >< เอ href = “https://linuxhint.com/create-html-file/” > จะสร้างไฟล์ HTML ได้อย่างไร? < / เอ >
จะแก้ไขไฟล์ HTML ได้อย่างไร
อย่างที่คุณเห็น พื้นที่ถูกสร้างขึ้นทางด้านขวาของลิงก์แรก:
วิธีที่ 2: การใช้ CSS
ใน CSS เราจะใช้ “ ขอบขวา ” คุณสมบัติเพื่อให้มีช่องว่างระหว่างสองลิงก์ “ ขอบขวา ” ใช้เพื่อเพิ่มพื้นที่จากด้านขวาขององค์ประกอบ คุณยังสามารถกำหนดค่าลบของมันได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ margin-right แสดงไว้ด้านล่าง:
ขอบขวา : ค่าในสถานที่ของ “ ค่า ” กำหนดระยะขอบจากด้านขวาขององค์ประกอบ มาดูตัวอย่างกันต่อ
ตัวอย่าง
ในที่นี้เราจะใช้ “ เอ ” เพื่อเข้าถึงลิงก์ที่เราสร้างใน HTML ถัดไป ตั้งค่าคุณสมบัติ margin-right เป็น “ 50px ”:
เอ {ขอบขวา : 50px ;
}
Space ถูกสร้างขึ้นจากด้านขวาของลิงก์แรก ซึ่งสามารถดูได้ด้านล่าง:
ขั้นตอนที่ 4: ให้ช่องว่างระหว่างสองลิงก์ในแนวตั้ง
หากต้องการให้ช่องว่างแนวตั้งระหว่างสองลิงก์ ขั้นแรกให้จัดแนวลิงก์ในรูปแบบแนวตั้ง นี้จะทำโดยใช้“ บล็อก ” มูลค่าของ “ แสดง ” ทรัพย์สินแล้วใช้ “ ความสูงของเส้น ” คุณสมบัติเพื่อให้มีช่องว่างระหว่างสองบรรทัดลิงค์
ตัวอย่าง:
ที่นี่เราจะตั้งค่าคุณสมบัติการแสดงผลเป็น “ บล็อก ” เพื่อจัดแนวลิงก์ในแนวตั้ง จากนั้นให้ช่องว่างระหว่างสองลิงก์โดยตั้งค่าคุณสมบัติ line-height เป็น “ 80px ”:
เอ {แสดง : บล็อก ;
ความสูงของเส้น : 80px ;
}
อย่างที่คุณเห็น พื้นที่ถูกสร้างขึ้นโดยใช้คุณสมบัติ line-height:
แค่นั้นแหละ! เราได้อธิบายวิธีการให้ช่องว่างระหว่างสองลิงก์ใน HTML & CSS
บทสรุป
“ ”, “ ขอบขวา ', และ ' ความสูงของเส้น ” คุณสมบัติของ CSS ถูกใช้เพื่อให้ช่องว่างแนวนอนและแนวตั้งระหว่างสองลิงก์ เมื่อใช้สิ่งนี้ คุณสามารถปรับช่องว่างจากด้านขวาและด้านซ้ายของลิงก์ได้ ในบทความนี้ เราได้อธิบายขั้นตอนเพื่อให้มีช่องว่างระหว่างสองลิงก์โดยใช้สองวิธีที่แตกต่างกันและให้ตัวอย่างที่เกี่ยวข้อง