x
<html><head><style>.imgbox { float: left; text-align: center; width: 120px; border: 1px solid gray; margin: 4px; padding: 6px;}button { width: 100%;}</style></head><body><h3>Различие между display:none и visiblity: hidden</h3><p><strong>visibility:hidden</strong> скрывает элемент, но по-прежнему занимает место в макете.</p><p><strong>display:none</strong> удаляет элемент из документа. Не занимает места.</p><div class="imgbox" id="imgbox1">Box 1<br> <img src="../images/img_5terre.jpg" alt="Italy" style="width:100%"> <button onclick="removeElement()">Удалить</button></div><div class="imgbox" id="imgbox2">Box 2<br> <img src="../images/img_lights.jpg" alt="Lights" style="width:100%"> <button onclick="changeVisibility()">Скрыть</button></div><div class="imgbox">Box 3<br> <img src="../images/img_forest.jpg" alt="Forest" style="width:100%"> <button onclick="resetElement()">Сбросить всё</button></div><script>function removeElement() { document.getElementById("imgbox1").style.display = "none";}function changeVisibility() { document.getElementById("imgbox2").style.visibility = "hidden";}function resetElement() { document.getElementById("imgbox1").style.display = "block"; document.getElementById("imgbox2").style.visibility = "visible";}</script></body></html>