To hide a div
element using CSS, you can utilize the display
property and set its value to none
. This will effectively hide the div
and remove it from the document flow, ensuring it doesn't occupy any space in the layout.
Here's how you can do it:
.hide-div {
display: none;
}
By applying the .hide-div
class to a div
, it will be hidden:
<div class="hide-div">This div will be hidden.</div>
When a div
has display: none;
, it becomes completely invisible and doesn't affect the layout of other elements around it. If you later want to show the div
, you can change its display
property to its original value (e.g., block
for block-level elements) or remove the .hide-div
class.