Height của thẻ cha phát sinh thêm vài px không biết từ đâu dù đã kiểm tra kỹ

Oaivy_Ftu · March 7, 2021, 3:10pm

Mọi người ơi cho em hỏi cái này ạ. Tự dưng thẻ .navbar-default trong phần header của project em đang làm có height tổng cộng là 76px trong khi height cao nhất của các thẻ con trong nó chỉ có 71px. Em đã kiểm tra kỹ không có thẻ con nào làm phát sinh thêm 5px cả. Vậy sao tự nhiên lại có thêm 5px đó ạ? @@ Rất mong mọi người giúp em ạ.

Trang web của em ở đây ạ: http://leoaivy.github.io/hikingclub/

Vong_Hoang_Tuong · November 26, 2015, 3:06am

Vấn đề là do .navbar-nav bạn dùng thuộc tính display: inline-block; nên mặc định trình duyệt sẽ chừa cho nó một khoảng trống bên dưới tương đương với kích thước font, bạn chỉ cần cho .navbar-default thuộc tính line-height: 0; là giải quyết được.

Hoặc là bạn đặt các thuộc tính display: inline-block; về display: block; và thêm float: left; cho .navbar-nav.
Lúc đó, height của .navbar-nav và .navbar-default sẽ về 0 do thuộc tính float, lúc đó bạn sử dụng kỹ thuật clearfix để xử lý:

.navbar-default:after, .navbar-nav:after, .search-form-toggle:after {
    content: " ";
    clear: both;
    display: table;
}