Скриване на елемент – display: none или visibility: hidden

Един HTML елемент може да се скрие по два начина. Ако чрез display пропъртито зададем, че го няма (none) или ако чрез visibility дефинираме, че е скрит (hidden). Имайте предвид обаче, че при тези два метода се получават различни резултати: visibility: hidden скрива елемента, но той все пак заема същото място както и преди. Елементът ще бъде скрит, но все пак ще се отрази на оформлението.

display: none крие елемента и той няма да заеме никакво място. Елемента ще бъде скрит, а страниците ще се показват все едно, че не е там – не се отразява на оформлението :

CSS Display – Блок и Inline Елементи

Един блок елемент е такъв елемент, който заема цялата ширина на разположение, и има нов ред преди и след него. Няколко примера за блокови HTML елементи:

• <h1>
• <p>
• <li>
• <div>

Един inline елемент заема само толкова ширина, колкото е необходимо и не придава нови редове. Примери за inline елементи:

• <span>
• <a>

Промяна на показването на един елемент

Можем да променим един елемент от inline на block и обратното. Това се прави с цел да накараме нашата страница да изглежда по един или друг начин. Следният пример показва <li> елементи като inline елементи. Този подход често се използва при менюта и навигации:

Следният пример показва <span> елементи като block елементи:

Забележка: настройките за видимост, променят само това как да се показва елементът , НЕ какъв елемент е. Тоест семантичната стойност на HTML елемента се запазва
Как да се покаже елемент като inline елемент. Този пример показва как да покажем даден елемент като inline елемент.
Как да накараме елемент от таблица да изчезне Този пример показва как да накараме орпеделен елемент от таблица да изчезна.