Cách xóa khoảng trắng trong css

Lượng không gian thừa để hiển thị giữa các từ (ngoài khoảng cách tiêu chuẩn cho phông chữ). Nó có thể là một trong những điều sau đây

ValueDescriptionfixedGiá trị cố định được biểu thị bằng px, em,.
p { khoảng cách từ. 0. 5em; . thông thường;
p { word-spacing: normal; }

Ghi chú

• Nếu thuộc tính khoảng cách từ được biểu thị dưới dạng một giá trị cố định, thì nó có thể là giá trị dương hoặc âm
  • Giá trị dương sẽ thêm khoảng cách bổ sung giữa các từ (ngoài khoảng cách tiêu chuẩn cho phông chữ)
  • Giá trị âm sẽ loại bỏ khoảng cách giữa các từ
• Nếu thuộc tính khoảng cách từ được đặt thành bình thường, phông chữ được chọn sẽ xác định khoảng cách giữa các từ

tính tương thích của trình duyệt web

Thuộc tính khoảng cách từ CSS có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Firefox (Tắc kè)
• Internet Explorer 6+ (IE 6+)
• Ô-pê-ra
• Safari (WebKit)

Thí dụ

Chúng ta sẽ thảo luận về thuộc tính khoảng cách từ bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS

Giá trị cố định dương

Hãy xem một ví dụ trong đó chúng tôi đặt khoảng cách bổ sung giữa các từ bằng cách sử dụng thuộc tính khoảng cách giữa các từ với một giá trị cố định dương

CSS sẽ trông như thế này

p { word-spacing: 5px; }

HTML sẽ trông như thế này

  
This paragraph was written by techonthenet.com.

Kết quả sẽ như thế này

Trong ví dụ về khoảng cách từ CSS này, chúng tôi đã đặt thuộc tính khoảng cách từ thành bình thường, điều đó có nghĩa là khoảng cách giữa các từ được xác định bởi phông chữ đã chọn

Xóa khoảng cách giữa các phần tử khối nội tuyến là một trong những câu hỏi thường gặp nhất trên internet. Một loạt các phần tử khối nội tuyến thường sẽ có khoảng trống ở giữa chúng

Chúng ta có thể giải quyết vấn đề này với sự trợ giúp của các thuộc tính CSS. Ngoài ra, một số thủ thuật có thể loại bỏ khoảng cách giữa các phần tử khối nội tuyến

Hãy thảo luận về ví dụ sau và đưa ra giải pháp

• Tạo một
  thẻ, được sử dụng để chỉ định một danh sách không có thứ tự. Các
  thẻ là một yếu tố cấp khối. Tạo nên
  • thẻ. Mỗi phần tử của một danh sách không có thứ tự được khai báo bên trong
  • nhãn
  • Sử dụng. lớp giả nth-child() để đặt kiểu cho hai lớp tiếp theo
  • thẻ

  
  
    
      Title of the document
      
    
    
      
  
        
  Item 1
        
  Item 2
        
  Item 3
      
    
  

  Ở đây, chúng ta thấy khoảng cách giữa các phần tử khối nội tuyến. Vì vậy, hãy xóa khoảng trắng bằng một số kỹ thuật

  1. Cách dễ nhất là làm như sau

  
      
  Item 1
  Item 2
  Item 3
  

  1. Bạn thậm chí có thể bỏ qua một số thẻ đóng hoàn toàn như thế này

  
    
  Item 1
    
  Item 2
    
  Item 3
  

  Hãy xem một cách khác để xóa khoảng trắng bằng thuộc tính lề phải. Trong ví dụ sau, chúng tôi đặt lề phải. -4px;

  
  
    
      
    
    
      
        W
        3
        docs
      
    
  

  Kết quả

  Các phần tử khối nội tuyến có khoảng trắng. Các phần tử khối nội tuyến không có khoảng trắng

  Chúng ta có thể đạt được kết quả tương tự bằng cách đặt thuộc tính cỡ chữ thành 0 cho

  .

  
  
    
      
    
    
      
        W
        3
        docs
      
    
  

  Chúng tôi có thể xóa khoảng trắng bằng Flexbox. Đọc các bình luận để biết lý do tại sao chúng ta nên sử dụng các tiện ích mở rộng với thuộc tính hiển thị

  Chuỗi khoảng trắng bị thu gọn. Các ký tự dòng mới trong nguồn được xử lý giống như các khoảng trắng khác. Các dòng bị ngắt khi cần thiết để điền vào các hộp dòng

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  4

  Thu gọn khoảng trắng như đối với

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  3, nhưng triệt tiêu ngắt dòng (gói văn bản) trong nguồn

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  6

  Dãy khoảng trắng được giữ nguyên. Các dòng chỉ bị ngắt tại các ký tự xuống dòng trong nguồn và tại các phần tử

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  7

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  8

  Dãy khoảng trắng được giữ nguyên. Các dòng bị ngắt ở các ký tự dòng mới, tại

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  7 và khi cần thiết để điền vào các ô dòng

  
    
  This paragraph was written by techonthenet.com.
  

  30

  Chuỗi khoảng trắng bị thu gọn. Các dòng bị ngắt ở các ký tự dòng mới, tại

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  7 và khi cần thiết để điền vào các ô dòng

  
    
  This paragraph was written by techonthenet.com.
  

  32

  Hành vi này giống với hành vi của

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  8, ngoại trừ việc
  • Mọi chuỗi khoảng trắng được bảo toàn luôn chiếm dung lượng, kể cả ở cuối dòng
  • Cơ hội ngắt dòng tồn tại sau mỗi ký tự khoảng trắng được bảo toàn, kể cả giữa các ký tự khoảng trắng
  • Các không gian được bảo toàn như vậy chiếm dung lượng và không bị treo, do đó ảnh hưởng đến kích thước nội tại của hộp (kích thước nội dung tối thiểu và kích thước nội dung tối đa)

  Bảng sau đây tóm tắt hành vi của các giá trị

  
  
    
      Title of the document
      
    
    
      
  
        
  Item 1
        
  Item 2
        
  Item 3
      
    
  

  4 khác nhau
  New linesSpaces and tabsText wrappingEnd-of-line spacesEnd-of-line other space separators

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  3CollapseCollapseWrapRemoveHang

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  4CollapseCollapseNo wrapRemoveHang

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  6PreservePreserveNo wrapPreserveNo wrap

  white-space = 
    normal        |
    pre           |
    nowrap        |
    pre-wrap      |
    break-spaces  |
    pre-line      
  
  

  8PreservePreserveWrapHangHang

  
    
  This paragraph was written by techonthenet.com.
  

  30PreserveCollapseWrapRemoveHang

  
    
  This paragraph was written by techonthenet.com.
  

  32PreservePreserveWrapWrapWrap

  Ghi chú. Có sự phân biệt giữa khoảng trắng và các dấu phân cách không gian khác. Chúng được định nghĩa như sau

  không gian

  Dấu cách (U+0020), tab (U+0009) và dấu ngắt đoạn (chẳng hạn như dòng mới)

  ngăn cách không gian khác

  Tất cả các dấu cách dấu cách khác được định nghĩa bằng Unicode, ngoài những dấu cách đã được định nghĩa là dấu cách

  Trường hợp khoảng trắng được cho là treo, điều này có thể ảnh hưởng đến kích thước của hộp khi được đo kích thước nội tại

white-space = 
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line