Tại sao khoảng đệm gây ra hộp hiển thị chồng lên bố cục của nó?

Question

Xem jsfiddle này ví dụ: http://jsfiddle.net/FrJRA/1/ và lưu ý rằng biên giới của nhịp bên trong chồng chéo div chứa.

Tôi hiểu điều gì đang xảy ra. Nhưng tôi không hiểu tại sao. Tại sao kích thước của div không tăng lên để cho phép chiều cao mới của span?

Tôi biết tôi có thể sử dụng display: inline-block nếu tôi muốn điều này xảy ra, nhưng lý do đằng sau inline không làm tăng kích thước vùng chứa gốc là gì?

Answer 1

Phần tử nội tuyến chỉ thay đổi thứ nguyên của chúng để đệm theo thứ nguyên trái/phải. Nó không làm tăng kích thước của phần tử theo các hướng trên cùng/dưới cùng. Đó là lý do tại sao bạn nhận thấy nó tăng nó ở hai bên nhưng không ở trên cùng/dưới cùng.

Cập nhật: Tìm thấy một phần của đặc điểm kỹ thuật W3 chạm vào điều này.

Các padding dọc, biên giới và lợi nhuận của một inline, không thay thế hộp bắt đầu ở phía trên và dưới cùng của khu vực nội dung, và không có gì để làm với 'line-height'. Nhưng chỉ có 'chiều cao dòng' được sử dụng khi tính chiều cao của hộp đường. CSS 2.1 Spec

Answer 2

Phần tử nội tuyến không có nghĩa là ảnh hưởng đến bố cục, đó là lý do tại sao block hoặc inline-block sẽ không nhưng khoảng cách inline sẽ không.

Answer 3

<div> không có nghĩa là thay đổi kích thước trong trường hợp này. Như <span> là một phần tử nội tuyến.

Nếu đó là các chức năng bạn đang tìm kiếm sửa đổi

div, span { 
    border: 1px solid gray; 
} 

với overflow:auto;

div, span { 
    border: 1px solid gray; 
    overflow:auto; 
}