Tìm hiểu về Block, Inline và Inline-block trong CSS

Đã đăng nhập thg 3 23, 2021 7:35 SA

3 phút đọc

Chúng tớ tiếp tục bên cạnh nhau lần hiểu 3 loại hiển Thị phần tử nhập CSS này đó là Block, Inline và Inline-block coi bọn chúng với gì không giống nhau nhé !

Trước Lúc nhập nội dung bài viết thì fake sử tất cả chúng ta với đoạn mã HTML như sau:

<html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
      <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <p>Đoạn văn <span class="inline">đầu tiên</span> nhập trang</p>
        <p>Đoạn văn <span class="block">thứ 2</span> nhập trang</p>
        <p>Đoạn văn <span class="inline-block">thứ 3</span> nhập trang</p>
    </body>
</html>

Ta tiếp tục thêm thắt một chút ít CSS cho những class bên trên nhé:

span {
    border: 2px doted red;  
}
.inline {
    display: inline;
}
.block {
    display: block;
    width: 100px;
    height: 100px;
}
.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
}

Khi bại bên trên skin tớ tiếp tục thấy tất cả hiển thị thế này:

1, Inline

Phần tử với tính chất display nằm trong loại Inline tiếp tục ở nằm trong loại với những thành phần cạnh nó.
Ta rất có thể coi thành phần Inline như thể những kể từ nằm trong một quãng văn, lúc còn khu vực trống trải thì nó ở cạnh bên thành phần trước nó, Lúc không còn khu vực trống trải thì nó "xuống dòng"
Khoảng cơ hội thân thiện thành phần Inline và những thành phần cạnh nó được nhằm khoác lăm le là khoảng cách Một trong những kể từ của font-size
Ta ko thể khái niệm những tính chất width, height, padding và margin theo dõi theo hướng dọc (top, bottom) giành riêng cho những thành phần Inline

Ta rất có thể test thêm thắt tính chất width và height nhập đoạn CSS giành riêng cho thành phần Inline:

.inline {
    display: inline;
    width: 100px;
    height: 100px;
}

Và test coi kết quả:

Mọi loại vẫn không thay đổi như thế.

Xem thêm: cúng 3 tháng 10 ngày cho bé

2, Block

Phần tử với tính chất display nằm trong loại Block tiếp tục phía trên một loại riêng rẽ.
Ta rất có thể coi thành phần Inline như là 1 trong những đoạn văn riêng rẽ rẽ, tách biệt với những phần phía trên và bên dưới nó
Với thành phần nằm trong loại Block, tớ trọn vẹn rất có thể khái niệm width và height cho tới nó (Mặc định vị trị là 100% đối với thành phần cha).

Nếu như tớ comment lên đường phần tính chất width và height ở nhập ví dụ trên:

.block {
    display: block;
    /*width: 100px;
    height: 100px;*/
}

Thì sản phẩm sẽ có được như sau:

Rõ ràng là width và height với tác động cho tới tính chất Block.

3, Inline-block

Nếu như bạn thích hiển thị Element của tớ theo phong cách Inline, tuy nhiên lại ham muốn chỉnh sửa được width, height, padding và margin theo dõi theo hướng dọc thì đấy là loại bạn phải.

Inline-block là loại phối hợp thân thiện Inline và Block, nó vừa phải rất có thể hiện trên nằm trong loại như Inline, lại rất có thể chỉnh sửa được những độ quý hiếm như tiếp tục nêu phía trên tương tự như Block.

Cũng tương tự như ở chỗ Block, tớ test comment lên đường tính chất width và height trong khúc CSS của Inline-block xem:

Xem thêm: nồng độ mol là gì

.block {
    display: inline-block;
    /*width: 100px;
    height: 100px;*/
}

Lần này bản thân sẽ không còn đăng hình sản phẩm nhằm chúng ta test hưởng thụ coi thế này nhé !

Thử tạo ra một navigation-bar với Inline-block

Với những đặc thù của Inline-block, tất cả chúng ta test tạo ra một navigation-bar cùng theo với nó coi sao nhé. Tại trên đây bản thân tiếp tục chú nhập vào đặc điểm của Inline-block nên sẽ không còn thực hiện vượt lên đẹp nhất đâu :v

<body>
    <h1>My Inline-block Navigation Bar</h1>

    <ul class="nav">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#clients">Our Clients</a></li>  
      <li><a href="#contact">Contact Us</a></li>
    </ul>
</body>

.nav {
    background-color: yellow; 
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
}