Home > Article > Web Front-end > How to hide elements in css without taking up space
How to hide elements in css without taking up space
- 青灯夜游Original
- 2022-06-01 19:15:405170browse
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 the display:none; style to the element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
display: none can 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
Just addposition: absolute;top: -9999px; style to the element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.position{
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="position">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
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!