Sổ tay hướng dẫn này sẽ hướng dẫn bạn quy trình tạo khoảng trống giữa hai liên kết.
Bắt đầu nào!
Làm thế nào để tạo khoảng trống giữa hai liên kết trong HTML & CSS?
Để tạo khoảng trống giữa hai liên kết, trước hết, hãy thêm các liên kết bắt buộc vào tệp HTML.
Bước 1: Thêm liên kết trong HTML
Trong HTML, chúng tôi sẽ tạo vùng chứa bằng thẻ
HTML
< div >< một href = “https://linuxhint.com/create-html-file/” > Làm thế nào để tạo một tệp HTML? < / một >
< một href = “https://linuxhint.com/edit-html-file/” > Làm thế nào để chỉnh sửa một tệp HTML? < / một >
< / div >
Hình ảnh sau đây cho thấy rằng các liên kết đã được thêm thành công:
Bước 2: Tạo kiểu cho Div & Link
Trong bước này, tạo kiểu div và liên kết bằng cách sử dụng “ div ”Trong CSS. Chúng tôi sẽ điều chỉnh phần đệm thành “ 40px ”Và đặt kích thước phông chữ của các liên kết là“ lớn hơn ”, Chiều cao của div được đặt là“ 150px ”Và sử dụng thuộc tính nền và đặt màu của div là“ màu đen ”. Sau đó, điều chỉnh chiều rộng đường viền là “ 5px ”, Phong cách là“ tiêu tan ”Và tô màu là“ rgb (251, 255, 0) ”.
CSS
div {đệm lót : 40px ;
cỡ chữ : lớn hơn ;
Chiều cao : 150px ;
lai lịch : màu đen ;
biên giới : 5px tiêu tan rgb ( 251 , 255 , 0 ) ;
}
Sử dụng đoạn mã trên, kết quả sau sẽ thu được. Như bạn có thể thấy, cả div và các liên kết đều được tạo kiểu:
Bước 3: Tạo khoảng trống giữa hai liên kết theo chiều ngang
Chúng ta có thể tạo khoảng trống giữa hai liên kết theo chiều ngang bằng cách sử dụng HTML và CSS. Ở đây, chúng tôi sẽ giải thích từng phương pháp một.
Phương pháp 1: Sử dụng HTML
Để tạo khoảng trống giữa các liên kết mà không cần viết bất kỳ CSS bên ngoài nào, bạn có thể sử dụng “ & nbsp ”Trong HTML nơi bạn muốn tạo không gian. “ & nbsp ”Là viết tắt của không gian không phá vỡ. Trong tệp HTML, thêm một & nbsp có nghĩa là một khoảng trắng. Nếu bạn muốn cung cấp thêm dung lượng, bạn không nên thêm & nbsp theo cách thủ công theo số lượng khoảng trắng cần thiết.
Hãy chuyển sang ví dụ để hiểu khái niệm đã nêu!
Thí dụ
Ở đây, chúng tôi sẽ viết bốn lần “ & nbsp ”Để tạo khoảng trắng sau liên kết đầu tiên theo cách mà liên kết thứ hai sẽ xuất hiện sau bốn dấu cách.
HTML
< div >< một href = “https://linuxhint.com/create-html-file/” > Làm thế nào để tạo một tệp HTML? < / một > & nbsp & nbsp & nbsp & nbsp
Cách chỉnh sửa tệp HTML?
Như bạn có thể thấy, khoảng trống được tạo ở phía bên phải của liên kết đầu tiên:
Phương pháp 2: Sử dụng CSS
Trong CSS, chúng tôi sẽ sử dụng “ lề phải ”Để cung cấp khoảng trống giữa hai liên kết. Các ' lề phải ”Thuộc tính được sử dụng để thêm khoảng trắng từ phía bên phải của phần tử. Bạn cũng có thể đặt giá trị âm cho nó.
Cú pháp
Cú pháp của thuộc tính margin-right được đưa ra dưới đây:
lề phải : giá trịThay cho “ giá trị ”, Đặt lề từ phía bên phải của phần tử. Hãy tiếp tục ví dụ.
Thí dụ
Ở đây, chúng tôi sẽ sử dụng “ một ”Để truy cập liên kết mà chúng tôi đã tạo trong HTML. Tiếp theo, đặt giá trị của thuộc tính margin-right là “ 50px ”:
một {lề phải : 50px ;
}
Khoảng trống được tạo từ phía bên phải của liên kết đầu tiên, có thể được nhìn thấy bên dưới:
Bước 4: Tạo khoảng trống giữa hai liên kết theo chiều dọc
Để tạo khoảng trống theo chiều dọc giữa hai liên kết, trước tiên hãy căn chỉnh các liên kết ở dạng dọc. Điều này sẽ được thực hiện bằng cách sử dụng “ khối 'Giá trị của' trưng bày ”Và sau đó sử dụng thuộc tính“ chiều cao giữa các dòng ”Để cung cấp khoảng trống giữa hai đường liên kết.
Thí dụ:
Ở đây, chúng tôi sẽ đặt giá trị của thuộc tính hiển thị là “ khối ”Để sắp xếp các liên kết theo chiều dọc. Sau đó, cung cấp khoảng cách giữa hai liên kết bằng cách đặt giá trị của thuộc tính line-height là “ 80px ”:
một {trưng bày : khối ;
chiều cao giữa các dòng : 80px ;
}
Như bạn có thể thấy, khoảng trống được tạo bằng thuộc tính line-height:
Đó là nó! Chúng tôi đã giải thích phương pháp tạo khoảng trống giữa hai liên kết trong HTML & CSS.
Sự kết luận
Các ' & nbsp ',' lề phải ', và ' chiều cao giữa các dòng ”Thuộc tính của CSS được sử dụng để cung cấp không gian ngang và dọc giữa hai liên kết. Sử dụng điều này, bạn có thể điều chỉnh không gian từ bên phải và bên trái của các liên kết. Trong bài viết này, chúng tôi đã giải thích thủ tục tạo khoảng trắng giữa hai liên kết bằng hai phương pháp khác nhau và cung cấp các ví dụ liên quan.