Visibility and Overflow in CSS

« Prev Next »

Visibility and overflow are two CSS properties that are often used together to control the visibility of elements and how they handle overflow content.

These properties are commonly used for a variety of purposes, including layout, scrolling behavior, and controlling element visibility without affecting document flow.

css-visibility-and-overflow

CSS Visibility Property

The visibility property in CSS is used to control whether an element is visible or not on the page. When an element is set to be hidden using the visibility property, it is not visible on the page, but it still occupies space in the layout.

 

Syntax for visibility

selector {
  visibility: value;
}

value: Specifies the visibility behavior. Common values include:

 

  • visible: The element is visible (default behavior).
  • hidden: The element is hidden but still occupies space in the document flow.
  • collapse: Used for table rows and columns to hide them without affecting the layout of other table elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      visibility: hidden; /* Element is hidden but occupies space */
    }
  </style>
</head>
<body>

<div>This div is hidden but still takes up space in the layout.</div>

</body>
</html>
Run ›

CSS Overflow Property

The overflow property in CSS is used to control what happens when content overflows an element’s box (i.e., when the content is larger than the element’s specified width or height). It can be used to determine whether the content should be clipped, whether scrollbars should appear, or if the content should just spill out of the box.

 

Syntax for overflow

selector {
  overflow: value;
}

value: Defines the behavior when content overflows an element’s box. Common values include:

 

  • visible: The default value. The content is visible and can overflow the box.
  • hidden: The content is clipped, and anything that overflows the element’s box is not visible
  • scroll: Adds scrollbars (horizontal and vertical) to the element, whether the content overflows or not.
  • auto: Adds scrollbars only if the content overflows the element’s box.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      overflow: hidden;
      background-color: lightblue;
    }

    p {
      width: 300px;
      height: 150px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>

<div>
  <p>This content is too large for the box and will be hidden.</p>
</div>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.