Đệm trên neo có trong danh sách không thay đổi kích thước chiều cao của mục danh sách

Question

Tôi muốn biết, tại sao thiết lập đệm dọc trên neo được lồng trong liên kết không thứ tự không thay đổi kích thước chiều cao của mục danh sách. Như bạn có thể thấy trên jsfiddle, các tab lớn hơn thành phần ul, vì vậy nó chồng chéo với div bên dưới.

Tôi hy vọng rằng li và cũng là ul được cao như nội dung của nó, do đó, div với đoạn được chuyển xuống.

HTML

<div class="tab-row"> 
    <ul> 
     <li> 
      <a href="#"><span>Tab 1</span></a> 
     </li> 
     <li> 
      <a href="#"><span>Tab 2</span></a> 
     </li> 
    </ul> 
</div> 
    <div class="tab-content"> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt semper quam. Suspendisse potenti. Donec adipiscing consequat erat. 
      Morbi semper, libero vel pulvinar tincidunt, lorem lorem scelerisque felis, sed tempor dolor dolor non felis. Quisque eu est. 
      Quisque blandit, pede non commodo convallis, purus elit pellentesque neque, in tempor libero dolor quis quam. Quisque eros. Vivamus porttitor. 
      Aenean quis odio. Cras commodo risus ac est. Fusce molestie, lacus at sagittis fermentum, dolor eros ultrices tellus, ac sollicitudin pede risus.</p> 
    </div> 
</div> 

CSS

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
.tab-row li { 
    display: inline; 
} 
.tab-row li a { 
    border: 1px solid #CCCCCC; 
    padding: 10px; 
    text-decoration: none; 
} 
.tab-content { 
    border1px solid #CCCCCC; 
} 
.tab-content p { 
    text-align: justify; 
    margin: 10px; 
} 

Answer 1

Bởi vì bạn đang thêm padding để một phần tử nội tuyến. Thêm:

.tab-row li a { 
    display: inline-block; 
} 

Hoặc float it to the left.

lý do đặt đệm trên phần tử nội tuyến không hoạt động ở đây?

Bạn chỉ có thể có phần đệm trái và phải cho phần tử nội tuyến. Đó là những thông số kỹ thuật. Mọi thuộc tính nên được áp dụng "Trong dòng", dòng được xác định bởi thuộc tính chiều cao dòng của phần tử gốc. Đọc thêm về nó in this article.

tại sao chỉ còn lại nó còn hoạt động?

Biến nó thành một phần tử khối.