Xóa không gian thừa trong CSS

Để xóa khoảng trống thừa bên dưới hình ảnh bên trong div, chúng ta có thể sử dụng CSS. Các thuộc tính CSS sau có thể được sử dụng để loại bỏ khoảng trắng -

• Thuộc tính vertical-align
• Thuộc tính line-height
• Thuộc tính hiển thị

Trước khi di chuyển xa hơn, chúng ta hãy xem không gian thừa bên dưới hình ảnh trông như thế nào –

Hình ảnh trong div có thể có thêm khoảng trống bên dưới. Có vẻ khó chịu và nên được gỡ bỏ như hình dưới đây. Chúng tôi đã đánh dấu không gian là không gian thừa bên dưới -

Bây giờ chúng ta hãy xem cách khắc phục -

Xóa khoảng trống thừa bên dưới hình ảnh bằng thuộc tính vertical-align

Thuộc tính vertical-align xác định việc căn chỉnh văn bản trong một dòng hoặc trong một ô của bảng. Sau đây là các giá trị có thể

• đường cơ sở - Đường cơ sở của phần tử được căn chỉnh với đường cơ sở của phần tử cha

• sub - Đường cơ sở của phần tử được hạ xuống điểm thích hợp cho văn bản được đăng ký

• super - Đường cơ sở của phần tử được nâng lên đến điểm thích hợp cho văn bản có chỉ số trên

• top - Phần trên cùng của hộp phần tử được căn chỉnh với phần trên cùng của hộp dòng, trong ngữ cảnh của nội dung nội tuyến hoặc với phần trên cùng của ô bảng trong ngữ cảnh của bảng

• text-top − Đầu hộp của phần tử được căn chỉnh với đầu hộp nội tuyến cao nhất trong dòng

• giữa - Đường cơ sở của phần tử được căn chỉnh với điểm được xác định bởi đường cơ sở của phần tử cha cộng với một nửa chiều cao x của phông chữ của phần tử cha, trong ngữ cảnh của nội dung nội tuyến

• bottom - Phần dưới cùng của hộp phần tử được căn chỉnh với phần dưới cùng của hộp dòng, trong ngữ cảnh của nội dung nội tuyến hoặc với phần dưới cùng của ô bảng trong ngữ cảnh của bảng

• text-bottom - Phần dưới cùng của hộp phần tử được căn chỉnh với phần dưới cùng của hộp nội tuyến thấp nhất trong dòng

• tỷ lệ phần trăm - Đường cơ sở của phần tử được tăng hoặc giảm theo tỷ lệ phần trăm đã cho của giá trị cho chiều cao dòng thuộc tính

• chiều dài - Đường cơ sở của phần tử được tăng hoặc giảm theo giá trị độ dài đã cho. Các giá trị độ dài âm được phép cho thuộc tính này. Giá trị độ dài bằng 0 cho thuộc tính này có tác dụng tương tự như giá trị đường cơ sở

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ để xóa khoảng trống thừa bên dưới hình ảnh bằng thuộc tính vertical-align

   
Remove extra space
   
   


   Learn Billiards
   

      

   

Xóa khoảng trống thừa bên dưới hình ảnh bằng thuộc tính line-height

Thuộc tính line-height sửa đổi chiều cao của các hộp nội tuyến tạo nên một dòng văn bản. Dưới đây là các giá trị có thể -

• normal - Chỉ đạo trình duyệt đặt chiều cao của các dòng trong phần tử thành khoảng cách "hợp lý"

• số - Chiều cao thực tế của các dòng trong phần tử là giá trị này nhân với cỡ chữ của phần tử

• chiều dài - Chiều cao của các dòng trong phần tử là giá trị đã cho

• phần trăm - Chiều cao của các dòng trong phần tử được tính bằng phần trăm kích thước phông chữ của phần tử

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ để xóa khoảng trống thừa bên dưới hình ảnh bằng thuộc tính line-height

   
Remove extra space
   
   
 

   Learn Billiards
   

      

   

Xóa khoảng trống thừa bên dưới hình ảnh bằng thuộc tính display

Thuộc tính hiển thị ảnh hưởng đến cách trình bày cơ bản nhất của một phần tử, phân loại phần tử đó thành một loại phần tử nhất định một cách hiệu quả. Dưới đây là các giá trị có thể -

• nội tuyến - Giá trị này khiến một phần tử tạo hộp cấp độ nội tuyến; . Phần tử sẽ tạo ra một hoặc nhiều hộp nội tuyến khi nó được hiển thị

• khối - Giá trị này khiến một phần tử tạo hộp cấp khối; . Phần tử sẽ tạo ra một hộp khối khi nó được hiển thị

• list-item - Giá trị này khiến một phần tử tạo cả hộp khối và hộp nội tuyến mục danh sách. Trong HTML, phần tử LI là ví dụ duy nhất về phần tử như vậy

• run-in - Trong một số điều kiện nhất định, giá trị này sẽ khiến phần tử bị. chèn vào. vào phần đầu của phần tử sau. Nếu một phần tử A được thiết lập để hiển thị. chạy vào và được theo sau bởi phần tử cấp khối B, sau đó A trở thành hộp cấp độ nội tuyến đầu tiên của B. Nếu phần tử theo sau A không phải là cấp khối, thì A trở thành hộp cấp khối

• nhỏ gọn - Trong một số điều kiện nhất định, giá trị này sẽ khiến phần tử được đặt sang một bên của phần tử sau

• điểm đánh dấu - Giá trị này sẽ đặt nội dung được tạo thành điểm đánh dấu; . trước và. sau các phần tử giả khi chúng được đặt trên các phần tử cấp khối

• bảng - Giá trị này khiến một phần tử tạo hộp bảng cấp khối. Điều này tương tự với phần tử HTML TABLE

• inline-table - Giá trị này khiến một phần tử tạo hộp bảng cấp độ nội tuyến. Mặc dù không có tương tự trong HTML, nhưng nó có thể được hình dung như một bảng HTML truyền thống có thể xuất hiện ở giữa một dòng văn bản

• table-cell - Giá trị này khai báo phần tử là một ô của bảng. Điều này tương tự với phần tử HTML TD

• table-row - Giá trị này khai báo phần tử là một hàng của các ô trong bảng. Điều này tương tự như phần tử HTML TR

• table-row-group - Giá trị này khai báo phần tử là một nhóm các hàng của bảng. Điều này tương tự với phần tử HTML TBODY

• table-column - Giá trị này khai báo phần tử là một cột của các ô trong bảng. Điều này tương tự như phần tử HTML COL

• table-column-group - Giá trị này khai báo phần tử là một nhóm các cột trong bảng. Điều này tương tự như phần tử HTML COLGROUP

• table-header-group - Giá trị này khai báo phần tử là một nhóm ô luôn hiển thị ở đầu bảng, được đặt trước bất kỳ hàng hoặc nhóm hàng nào nhưng sau bất kỳ chú thích bảng nào được căn chỉnh trên cùng. Điều này tương tự với phần tử HTML THEAD

• table-footer-group − Giá trị này khai báo phần tử là một nhóm ô luôn hiển thị ở cuối bảng, được đặt sau bất kỳ hàng hoặc nhóm hàng nào nhưng trước bất kỳ chú thích bảng được căn chỉnh dưới cùng nào. Điều này tương tự với phần tử HTML TFOOT

• chú thích bảng - Giá trị này khai báo phần tử là chú thích cho bảng. Điều này tương tự với phần tử HTML CAPTION

• none - Phần tử sẽ không tạo ra hộp nào cả và do đó sẽ không được hiển thị cũng như không ảnh hưởng đến bố cục của tài liệu