Cách vẽ một đường thẳng đứng để tách văn bản HTML khỏi hình ảnh

HTML không cung cấp giải pháp rõ ràng cho các đường thẳng đứng như đối với các đường ngang - tương đương với dọc


thẻ không tồn tại. Nếu bạn muốn thiết lập trang Web doanh nghiệp của mình để có sự phân định rõ ràng giữa văn bản và hình ảnh, bạn có thể sử dụng CSS để tạo đường viền đơn giản. Đường viền có thể đi xung quanh toàn bộ hình ảnh hoặc bạn có thể hiển thị đường viền ở một bên. Bạn cũng có thể sử dụng CSS để làm nổi hình ảnh, tạo văn bản được bao bọc.

1.

Thiết lập hình ảnh của bạn trong văn bản của bạn và thêm thẻ thuộc tính "style". Chẳng hạn, mã HTML cho hình ảnh của bạn có thể trông giống như thế này:

2.

Xác định đường viền trong thuộc tính "style". Chẳng hạn, nếu bạn muốn một đường viền áp dụng cho toàn bộ hình ảnh, CSS sẽ trông như thế này:

Đây là cài đặt đường viền tốc ký - giá trị đầu tiên đặt chiều rộng của đường viền, giá trị thứ hai xác định loại đường viền và thứ ba đặt màu. Biên giới có thể là rắn, chấm, nét đứt hoặc gấp đôi; hoặc bạn có thể chỉ định đường viền 3 chiều như rãnh, sườn, hình nhỏ hoặc đầu.

Nếu bạn muốn áp dụng đường viền cho chỉ một bên để tạo một đường thẳng đứng thực sự, bạn sẽ sử dụng "đường viền bên trái" hoặc "đường viền bên phải" thay vì "đường viền".

3.

Thêm phần đệm để tạo một số khoảng trống giữa hình ảnh và văn bản của bạn. Nếu bạn muốn đường viền cách hình ảnh 5 pixel, hãy thêm "padding: 5px;" để thẻ phong cách của bạn. Bạn có thể chỉ định phần đệm ở một bên bằng cách sử dụng, ví dụ: "padding-left: 5px;". Nếu bạn muốn tạo không gian giữa đường viền và văn bản, hãy sử dụng lề. Bạn cũng sẽ cần chỉ định URL hình ảnh của mình cho thẻ "src". Khi bạn đặt tất cả lại với nhau, mã của bạn có thể trông giống như thế này:

4.

Lưu và kiểm tra HTML của bạn để xác nhận rằng đường viền đang hiển thị như bạn dự định.

Bài ViếT Phổ BiếN