Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container {
width: 100%;
background-color: #f0f0f0;
padding: 20px;
}
.box {
min-width: 200px;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border: 2px solid #388E3C;
transition: width 0.3s;
}
.box:hover {
width: 300px;
}The 'min-width' CSS property sets the minimum width of an element. This means that the element cannot be narrower than the specified value, regardless of the content inside it. It is useful for ensuring that elements maintain a certain size for better layout control, especially in responsive designs.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
min-inline-size: 200px; /* Sets a minimum width */
border-radius: 5px;
text-align: center;
transition: width 0.3s;
width: 150px; /* Initial width less than min-inline-size */
}
.box:hover {
width: 300px; /* Expands to a width greater than min-inline-size on hover */
}The 'min-inline-size' CSS property sets the minimum size of an element in the inline direction, which is determined by the writing mode. This property is useful for ensuring that elements do not shrink below a specified width, allowing for better control over layout and readability in responsive designs.
.container {
background-color: lightblue;
min-height: 200px;
padding: 20px;
border: 2px solid blue;
text-align: center;
}The 'min-height' CSS property sets the minimum height of an element. If the content inside the element exceeds this height, the element will expand to fit the content. This property is useful for ensuring that elements maintain a consistent size, even when they contain varying amounts of content.
.container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .box { background-color: #4CAF50; color: white; padding: 20px; min-block-size: 100px; min-height: 100px; width: 200px; text-align: center; }The 'min-block-size' CSS property defines the minimum size of an element in the block direction (vertical for a block-level element). It ensures that the element cannot be smaller than the specified value, even if the content would normally allow it to shrink. This property is particularly useful for maintaining layout integrity in responsive designs.
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
color: #666;
}The 'max-width' property in CSS sets the maximum width of an element, preventing it from growing larger than the specified value. This is useful for responsive design, allowing elements to resize within a flexible layout while maintaining a limit to their width. It helps ensure that content remains readable and visually appealing on various screen sizes.