CSS container Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS container property is not a standard CSS property. However, it's possible that you may be referring to the concept of creating a container in CSS using a combination of properties like width, margin, and padding. In CSS, a container is typically a designated element that encapsulates and organizes other content on a web page. By setting the width property to a specific value, applying margin to control spacing around the container, and using padding to adjust the space between the container's content and its boundaries, web designers can structure and style their layouts effectively. Containers play a crucial role in responsive web design, helping to create well-organized and visually appealing web pages across various screen sizes and devices.

Initial value
See individual properties
Applies to
all elements
Inherited
no
Computed value
See individual properties
Animatable
See individual properties
JavaScript syntax
object.style.container

Syntax

container: <container-name> | <container-type>

Values

  • <container-name>A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.
  • <container-type>The type of containment context. More details on the syntax are covered in the container-type property page.

Example

.post {
  container: sidebar / inline-size;
}

Browser Support

The following table will show you the current browser support for the CSS container property.

Desktop
Edge Chrome Firefox Opera Safari
1051051109116
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
105110721620105

Last updated by CSSPortal on: 31st December 2023