CSS Display


CSS Display

Mỗi thẻ HTML đều có một default display tùy từng loại thẻ. Default display có 2 loại là block hoặc là inline.

  1. Các thẻ sau là block: div, p, h1, h2, h3, h4, h5, h6, form, header, footer, section, ..v.v.
  2. Các thẻ sau là inline: span, a, img ..v.v.

=>Thẻ block sẽ chiếm hết phần width và thẻ luôn luôn bất đầu ở dòng mới (new line), còn thẻ inline chỉ chiếm phần width mình cần và thẻ không bất đầu ở dòng mới (new line). Ta xem ví dụ sau:

<style>
 p.myStyle1 {
   background-color: yellow;
 }
p.myStyle2 {
   background-color: yellow;
 }

a.myStyle3 {
 background-color: yellow;
}

a.myStyle4 {
 background-color: yellow;
}

</style>

<p class="myStyle1">P is block element</p>
<p class="myStyle2">P is block element</p>
<a class="myStyle3">Dblog24h</a>
<a class="myStyle4">Dblog24h</a>

P is block element

P is block element

Dblog24h Dblog24h

Ta thấy thẻ p là block nên lấy hết phần width. Còn thẻ a là inline nên chỉ lấy phần width mình cần. Nếu ta muốn chỉnh lại là thẻ p là inline, còn thẻ a thì là block, Ta làm như sau.

<style>
 p.myStyle5 {
   background-color: yellow; 
   display: inline;
 }
p.myStyle6 {
   background-color: yellow;
   display: inline;
 }

a.myStyle7 {
 background-color: yellow;
 display: block;
 margin-bottom: 5px;
}

a.myStyle8 {
 background-color: yellow;
 display: block;
}

</style>

<p class="myStyle5">P is block element</p>
<p class="myStyle6">P is block element</p>
<a class="myStyle7">Dblog24h</a>
<a class="myStyle8">Dblog24h</a>

P is block element

P is block element

Dblog24h Dblog24h

Ngoài ra ta muốn ẩn một thẻ ta dùng display: none; Lưu ý là thẻ vẫn còn trong html nhưng chỉ bị ẩn đi, chứ không phải bị remove ra khỏi html.

<style>
 p.myStyle9 {
   background-color: yellow; 
 }
p.myStyle10 {
   background-color: yellow;
   display: none;
 }


</style>

<p class="myStyle9">First is block</p>
<p class="myStyle10">Second is hidden</p>

First is block

Second is hidden

Ngoài ra ta cũng có thể chỉnh CSS Display là inline-block. Ta xem bài viết sau nhé. ^_^