How to hide elements in css without taking up space

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Two ways to hide elements in css without taking up space

Method 1: Use the display attribute

Just set thedisplay:none;style to the element

     
  
正常显示元素
 
隐藏元素
 
正常显示元素
  

display: nonecan hide the element without occupying space, so dynamically changing this attribute will cause rearrangement (change the page layout), which can be understood as deleting the element from the page; it will not be inherited by descendants, but His descendants will not be shown, after all, they are all hidden together.

Method 2: Using position and top attributes

position: absolute;top: -9999px;style to the element

     
  
正常显示元素
 
隐藏元素
 
正常显示元素
  

The above is the detailed content of How to hide elements in css without taking up space. For more information, please follow other related articles on the PHP Chinese website!