Thẻ không xuống dòng html

Question

Khi một trình duyệt đọc một tài liệu HTML, trình duyệt đọc nó từ trên xuống dưới và từ trái sang phải. Các thẻ HTML được sử dụng để tạo các tài liệu HTML và hiển thị thuộc tính của chúng. Mỗi thẻ HTML có các thuộc tính khác nhau. Thẻ HTML chứa ba phần chính: thẻ mở, nội dung và thẻ đóng.

: Định nghĩa khoá mã hoá đi kèm với một trường trong form (key-pair).

: Định nghĩa các nguồn đa phương tiện cho các phần tử đa phương tiên như

: Xác định mối quan hệ giữa một tài liệu và một nguồn lực bên ngoài (thường được sử dụng để liên kết đến style sheets).

: Định nghĩa siêu dữ liệu về một tài liệu HTML.

: Xác định tham số của plugins là object hay video gì đó.

: Định nghĩa nội dung mô tả như chú thích, bình luận, hoặc các loại văn bản khác cho các tập tin đa phương tiện (

: Vị trí ngắt hàng tuỳ chỉnh. Quy định đoạn nội dung có thể xuống dòng để tránh hỏng giao diện.

Cái gì cũng có bất quy tắc và đây là bất quy tắc của HTML.

3. Lưu ý với các thẻ đóng

Luôn sử dụng thẻ đóng là điều cần thiết không sợ lỗi thời. Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ ví dụ như các thẻ trên nhưng khuyến khích bạn nên sử dụng thẻ đóng. Bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng) và đâu cũng có nguyên do của nó vì:

Chúng ta sẽ cùng nhau tìm hiểu 3 kiểu hiển thị phần tử trong CSS đó là Block, Inline và Inline-block xem chúng có gì khác nhau nhé !

Trước khi vào bài viết thì giả sử chúng ta có đoạn mã HTML như sau:

<html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href="main.css">
    head>
    <body>
        <p>Đoạn văn <span class="inline">đầu tiênspan> trong trangp>
        <p>Đoạn văn <span class="block">thứ 2span> trong trangp>
        <p>Đoạn văn <span class="inline-block">thứ 3span> trong trangp>
    body>
html>

Ta sẽ thêm một chút CSS cho các class 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 đó trên giao diện ta sẽ thấy mọi thứ hiển thị thế này:

Nguyen Tuan Linh @tuanlinhtl17

Có thể bạn quan tâm

Theo dõi

1.2K 48 35

Đã đăng vào thg 3 23, 2021 7:35 SA 3 phút đọc

8.0K

0

2

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

Báo cáo
Thêm vào series của tôi

Chúng ta sẽ cùng nhau tìm hiểu 3 kiểu hiển thị phần tử trong CSS đó là Block, Inline và Inline-block xem chúng có gì khác nhau nhé !

Trước khi vào bài viết thì giả sử chúng ta có đoạn mã HTML như sau:

<html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href="main.css">
    head>
    <body>
        <p>Đoạn văn <span class="inline">đầu tiênspan> trong trangp>
        <p>Đoạn văn <span class="block">thứ 2span> trong trangp>
        <p>Đoạn văn <span class="inline-block">thứ 3span> trong trangp>
    body>
html>

Ta sẽ thêm một chút CSS cho các class 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 đó trên giao diện ta sẽ thấy mọi thứ hiển thị thế này:

1, Inline

Phần tử có thuộc tính display thuộc kiểu Inline sẽ nằm cùng dòng với các phần tử cạnh nó.
Ta có thể coi phần tử Inline như là các từ thuộc một đoạn văn, khi còn chỗ trống thì nó nằm bên cạnh phần tử trước nó, khi hết chỗ trống thì nó "xuống dòng"
Khoảng cách giữa phần tử Inline và các phần tử cạnh nó được để mặc định là khoảng cách giữa các từ của font-size
Ta không thể định nghĩa các thuộc tính width, height, padding và margin theo chiều dọc (top, bottom) dành cho các phần tử Inline

Ta có thể thử thêm thuộc tính width và height vào đoạn CSS dành cho phần tử Inline:

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

Và hãy thử xem kết quả:

Mọi thứ vẫn giữ nguyên như vậy.

2, Block

Phần tử có thuộc tính display thuộc kiểu Block sẽ nằm trên một dòng riêng.
Ta có thể coi phần tử Inline như là một đoạn văn riêng rẽ, tách biệt với các phần nằm trên và dưới nó
Với phần tử thuộc kiểu Block, ta hoàn toàn có thể định nghĩa width và height cho nó (Mặc định giá trị là 100% so với phần tử cha).

Nếu như ta comment đi phần thuộc tính width và height ở trong ví dụ trên:

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

Thì kết quả nhận được như sau:

Rõ ràng là width và height có ảnh hưởng đến thuộc tính Block.

3, Inline-block

Nếu như bạn muốn hiển thị Element của mình theo kiểu Inline, nhưng lại muốn căn chỉnh được width, height, padding và margin theo chiều dọc thì đây là thứ bạn cần.

Inline-block là kiểu kết hợp giữa Inline và Block, nó vừa có thể hiển thị trên cùng dòng như Inline, lại có thể căn chỉnh được các giá trị như đã nêu ở trên giống như Block.

Cũng giống như ở phần Block, ta hãy thử comment đi thuộc tính width và height trong đoạn CSS của Inline-block xem:

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

Lần này mình sẽ không đăng hình kết quả để bạn thử trải nghiệm xem thế nào nhé !

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

Với các đặc trưng của Inline-block, chúng ta hãy thử tạo một navigation-bar cùng với nó xem sao nhé. Ở đây mình sẽ chú trong vào đặc tính của Inline-block nên sẽ không làm quá đẹp đâu :v

programming html

Thẻ không xuống dòng html

3. Lưu ý với các thẻ đóng

Có thể bạn quan tâm

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội