Posts

Showing posts with the label Css Logical Properties & Values

Css Inset Example

The inset CSS property is a shorthand that corresponds to the top , right , bottom , and/or left properties. It has the same multi-value syntax of the margin shorthand. While part of the CSS Logical Properties specification, it does not define logical offsets. It defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. /* <length> values */ inset : 10px ; /* value applied to all edges */ inset : 4px 8px ; /* top/bottom left/right */ inset : 5px 15px 10px ; /* top left/right bottom */ inset : 2.4em 3em 3em 3em ; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset : 10% 5% 5% 5% ; /* Keyword value */ inset : auto ; /* Global values */ inset : inherit ; inset : initial ; inset : unset ; Syntax Values The inset property takes the same values as the left property. Formal definition Initial value auto Applies to positioned elem...

Css Margin-block-start Example

The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. Syntax /* <length> values */ margin-block-start : 10px ; /* An absolute length */ margin-block-start : 1em ; /* relative to the text size */ margin-block-start : 5% ; /* relative to the nearest block container's width */ /* Keyword values */ margin-block-start : auto ; /* Global values */ margin-block-start : inherit ; margin-block-start : initial ; margin-block-start : unset ; It corresponds to the margin-top , margin-right , margin-bottom , or margin-left property depending on the values defined for writing-mode , direction , and text-orientation . It relates to margin-block-end , margin-inline-start , and margin-inline-end , which define the other margins of the element. Values The margin-block-start property takes the same values as the margin-l...