InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS visibility – hide an element keeping its space

on Mar 16, 2016

CSS property visibility specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout. One can set the css display property to ‘none’ to suppress box generation altogether.

CSS property visibility

CSS version: CSS 2.1
Value: visible | hidden | collapse | inherit
Initial: visible
Applies to: all elements
Inherited: yes

visibility values

visibleThe generated box is visible
hiddenThe generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible.
collapsedApplicable for table rows/columns. Entire row or column to be removed from the display and space made available to other content. It does not have good browser support.

Example – visibility

In this example for visibility value:

  1. visible: First div is visible
  2. hidden: First div is hidden here but it still takes its space.
In the following code, CSS property visibility can be changed to the following values
  • visible
  • hidden
<style type="text/css">
.box {
  width:100px;
  background-color: lightgreen;
  visibility: visible;
}
.box2 {
  width:100px;
  background-color: lightgray;
}
</style>
<div class="box">
box
</div>
<div class="box2">
box2
</div>
visibility refresh done
try it online

Specification

  • W3C CSS 2.1 visibility specification

Suggested posts:

  1. CSS word-spacing – additional space between words
  2. CSS white-space – collaping and wrapping of whitespaces and newlines
  3. CSS overflow – visible, hidden and scroll for overflowing content
  4. CSS text-overflow – truncate text with three dots
  5. CSS resize – make block element resizable by user
  6. CSS outline – create outline around an element
  7. CSS clip
  8. jQuery – check if element is visible in viewport ofter scroll
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress