Logical Properties in CSS Last Updated : 07 Jan, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report CSS logical properties use the terms block and inline to define the direction of the writing flow.Block Properties: Control vertical flow (e.g., top/bottom margins, padding) in horizontal writing modes.Inline Properties: Control horizontal flow (e.g., left/right margins, padding) in horizontal writing modes.Syntax:.element { margin-block: 10px; /* Top and bottom margins */ padding-inline: 20px; /* Left and right padding */ }margin-block: Sets the top and bottom margins.padding-inline: Sets the left and right padding. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .box { margin-block: 10px; padding-inline: 15px; } </style> <!--Driver Code Starts--> </head> <body> <div class="box">This is a box with logical properties.</div> </body> </html> <!--Driver Code Ends--> margin-block: Sets top and bottom margins.padding-inline: Sets left and right padding.Mapping Logical Properties to Physical EquivalentsHere is a list of CSS logical properties and their physical equivalents:Logical PropertyPhysical Equivalentinline-sizewidthmax-inline-sizemax-widthmin-inline-sizemin-widthblock-sizeheightmax-block-sizemax-heightmin-block-sizemin-heightborder-block-startborder-topborder-block-endborder-bottomborder-inline-startborder-leftborder-inline-endborder-rightmargin-block-startmargin-topmargin-block-endmargin-bottommargin-inline-startmargin-leftmargin-inline-endmargin-rightinset-block-starttopinset-block-endbottominset-inline-startleftinset-inline-endrightMore Examples of CSS Logical PropertiesAdding Borders Using Logical Properties HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .border-example { border-block-start: 2px solid blue; border-inline-end: 2px solid orange; } </style> <!--Driver Code Starts--> </head> <body> <div class="border-example"> Logical Properties: Flexible Borders for Different Writing Modes </div> </body> </html> <!--Driver Code Ends--> border-block-start: Adds a blue border to the block's start side.border-inline-end: Adds an orange border to the inline's end side. Logical Values with Advanced Styles HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .logical-styled-box { margin-block: 20px; padding-inline: 15px; border-block: 3px dashed red; border-inline: 2px solid blue; text-align: start; } </style> <!--Driver Code Starts--> </head> <body> <div class="logical-styled-box"> Advanced Logical Styles: Responsive Borders, Padding, and Alignment </div> </body> </html> <!--Driver Code Ends--> margin-block: Adds vertical spacing (top and bottom margins).padding-inline: Adds horizontal padding (left and right).border-block: Adds dashed red borders at block-start and block-end.border-inline: Adds solid blue borders at inline-start and inline-end.Best Practices for Using CSS Logical PropertiesUse logical properties to make layouts adapt to different writing modes, enhancing responsiveness.Replace directional properties (e.g., top, left) with logical ones for better flexibility.Always test your layout in various writing modes to ensure consistency across languages.Combine logical properties with media queries for optimized designs on diverse devices. Comment More infoAdvertise with us Next Article CSS | border-inline Property H harsh464565 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Primer CSS Inline Styles Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read CSS | padding-inline Property The padding-inline property in CSS is used to define the logical inline start and end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline: length|percentage|auto|inherit|initial|unset; Prope 2 min read CSS | border-inline Property The border-inline property in CSS is used to set the individual logical block inline border property values in a single place in the style sheet. It sets the inline border-top(left) and bottom(right) of the defining element. Syntax: border-inline: border-width| border-style| border-color; Property v 2 min read CSS | padding-inline-start Property The padding-inline-start property in CSS is used to define the logical block start padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline-start: length|percentage|auto|inherit|initial|unset; Pr 2 min read CSS | padding-inline-end Property The padding-inline-end property in CSS is used to define the logical block end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline-end: length|percentage|auto|inherit|initial|unset; Property 2 min read CSS | padding-block Property The padding-block property in CSS is used to define the logical block start and end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation.Syntax: padding-block: length|percentage|auto|inherit|initial|unset; Property 2 min read Like