30/09/2018, 18:52

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

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/

null viết 20:52 ngày 30/09/2018

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;
}

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Oaivy Ftu

0 chủ đề

0 bài viết

Tác giả nổi bật

Từ khóa nổi bật

AngularJS Blog Bootstrap C / C++ Cấu trúc dữ liệu & Giải thuật Cơ sở dữ liệu Codeigniter Công cụ lập trình CSS CSS cơ bản CSS3 Học Excel HTML HTML cơ bản HTML5 Java Javascript jQuery Json Lập trình mobile Laravel Linux MongoDB MySQL NodeJS Oracle Pascal PHP PHP cơ bản PHP nâng cao Python React Native ReactJS Ruby SEO SQL Server Swift Visual Basic VueJS WordPress XML

Chủ đề nổi bật

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

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI