Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container {
display: flex;
justify-content: flex-end;
height: 100vh;
background-color: #f0f0f0;
padding-inline-end: 20px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
inset-inline-end: 20px;
position: relative;
}The 'inset-inline-end' CSS property defines the logical end offset of an element's box, allowing for precise positioning in a way that respects the writing direction of the content. It is particularly useful in responsive design and for adapting layouts to different languages and writing systems. This property can be used to create spacing or positioning effects that adjust automatically based on the text direction.
.container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
.box { width: 200px; height: 100px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; position: relative; inset-inline: 20px; }The 'inset-inline' CSS property is a shorthand for setting the 'inset-inline-start' and 'inset-inline-end' properties, which control the inline (left/right) positioning of an element. It allows for more straightforward control of an element's position within its container in a responsive manner, especially useful in layouts that adapt to different writing modes and text directions.
.container { display: block; border: 2px solid #333; padding: 20px; } .heading { inset-block-start: 30px; } .text { margin-top: 10px; }The 'inset-block-start' property is a CSS logical property that defines the distance between the start edge of a block container and its content in the block direction (which is top for a vertical writing mode). This property allows for more flexible and responsive layouts, especially when dealing with different writing modes and directions. It can be particularly useful for adjusting the layout in a way that respects the flow of text in various languages.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
background-color: #007BFF;
color: white;
padding: 20px;
border-radius: 5px;
position: relative;
inset-block-end: 50px;
}
.box::after {
content: '';
display: block;
height: 50px;
background-color: transparent;
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
}The 'inset-block-end' CSS property defines the logical end edge of an element in a block container, allowing for more intuitive control of element positioning in a block direction. It is part of the logical properties and values specification, which simplifies layout design for different writing modes. By using 'inset-block-end', you can easily adjust the space at the end of a block without worrying about the specific writing direction.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
position: relative;
}
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
inset-block: 20px 0; /* 20px top, 0px bottom */
position: absolute;
}The 'inset-block' CSS property is a shorthand for setting the top and bottom offsets of a positioned element in a block direction. It allows for easy vertical positioning of elements, making layout adjustments simpler. This property is particularly useful in flexbox and grid layouts where vertical alignment is key.