Sự khác biệt display và visibility trong css

su khac biet display và visibility

Trong quá trình làm việc với css, một số bạn không hiểu bản chất thuộc tính displayvisibility trong css. Bài hôm nay mình sẽ làm rõ vấn đề này.

 

Thuộc tính display và visibility

display và visibility

Giống nhau: Ẩn hoặc hiển thị element.

 

Một element là có start tag <tagname>,  end tag </tagname>  và nội dung chứa trong đó (content)

Ví dụ <p>Anh đi xa quá …</p> là một element

 

Khác nhau: (Ẩn element)

display: none (Ẩn) visibility: hidden (Ẩn)
 Ẩn element và nhường chỗ trống cho phần tử khác  Ẩn elemet nhưng vẫn chứa khoảng trống kích cỡ của elemet đó.

 

Demo

Với đoạn code phía dưới, bạn lần lượt gỡ bỏ comment xem hiện tượng xảy ra từng cái với class display và visibility.

 

HTML


<div class="display">
Vi du display
</div>

<div class="visibility">
Vi du display
</div>

<div class="test">
Div de test khoang trong
</div>

 

CSS:


.display {
/* display: none; */
height: 100px;
width: 100px;
background: green;
text-align: center;
color: #fff;
border: 5px solid #000;
margin-top: 50px;
}

.visibility {
/* visibility: hidden; */
height: 100px;
width: 100px;
background: red;
text-align: center;
color: #fff;
border: 5px solid #000;
margin-top: 50px;

}

.test {

height: 100px;
width: 100px;
background: blue;
text-align: center;
color: #fff;
border: 5px solid #000;
margin-top: 50px;
}

 

See the Pen display vs visibility by Leonard Huynh (@leonardhuynh) on CodePen.light

 

Lời kết

Với cách giải thích trên hi vọng các đã hiểu khi nào trình bày visibility và display.

Mọi thắc mắc các bạn hãy comment phía dưới.

Leonard Huynh,

Bạn có thể thích

Leave a Reply

Your email address will not be published. Required fields are marked *