Tại sao hiển thị: inline-block; loại bỏ gạch dưới từ phần tử con?

Question

Gần đây tôi đã trả lời một câu hỏi và OP muốn text-decoration: underline; cho toàn bộ văn bản bọc bên trong phần tử a, nhưng không phải là một bọc bên span, vì vậy nó là một cái gì đó như thế này

<a href="#"><span>Not Underline</span>Should Be Underlined</a> 

Vì vậy, chỉ đơn giản là đưa ra

span { 
    text-decoration: none; 
} 

không loại bỏ gạch chân cho văn bản được bao bọc bên trong phần tử span

Nhưng điều này sẽ loại bỏ phần dưới ine

span { 
    text-decoration: none; 
    display: inline-block; 
} 

Vì vậy, tôi đã span một inline-block và nó làm việc, đó là cách tôi thường làm điều đó. Nhưng khi nó đến để giải thích tôi đã không thể giải thích tại sao thực hiện điều này thực sự loại bỏ gạch chân mà chỉ đơn giản là sử dụng text-decoration: none; không.

Demo

Answer 1

trang trí văn bản được truyền từ một yếu tố để con cháu nhất định trong những trường hợp nhất định. Các spec mô tả tất cả các trường hợp trong đó điều này xảy ra và không xảy ra (cũng như trường hợp hành vi rõ ràng là không xác định). Ở đây, phần sau có liên quan:

Lưu ý rằng trang trí văn bản không được truyền cho hậu duệ nổi và vị trí tuyệt đối, cũng như nội dung của con cháu nội tuyến nguyên tử như khối nội tuyến và bảng nội tuyến.

Lưu ý rằng tuyên truyền này không giống như thừa kế và là một khái niệm hoàn toàn riêng biệt; trên thực tế, text-decoration: none và text-decoration: inherit không ảnh hưởng đến công tác tuyên truyền theo cách bạn mong muốn họ:

• text-decoration: none chỉ có nghĩa là "yếu tố này không có trang trí văn bản của riêng mình", và
• text-decoration: inherit có nghĩa là "yếu tố này có cùng một giá trị được chỉ định text-decoration làm cha mẹ của nó. "

Trong cả hai trường hợp, trang trí văn bản gốc sẽ vẫn được truyền tới phần tử nếu có. Bạn có thể buộc một khối nội tuyến để có cùng một trang trí văn bản với bố cục của nó bằng cách sử dụng inherit, nhưng không bất kỳ trang trí nào khác mà cha mẹ đạt được thông qua tuyên truyền từ tổ tiên của chính nó.

Điều này cũng có nghĩa là chỉ cần có display: inline-block là đủ để ngăn không cho trang trí văn bản được truyền bá. Bạn không cần phải xác định lại text-decoration: none - đó là giá trị ban đầu.