CSS container Property
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
105 | 105 | 110 | 91 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
105 | 110 | 72 | 16 | 20 | 105 |
Last updated by CSSPortal on: 31st December 2023