CSS Logical Properties

A collection of features in CSS called CSS Logical Properties and Values gives programmers writing mode and direction-neutral control over the layout. This implies that you can design styles that, without requiring you to change the CSS, automatically adjust to various writing modes (horizontal, vertical), as well as directions (left-to-right, right-to-left).

What are CSS Logical properties?

In simple words, With the help of CSS Logical Properties, layout control is no longer dependent on text direction, allowing styles to easily adjust to various writing modes.

When working with logical attributes rather than directional ones, typing modes and the path(direction) of the text flow affect both spacing and layout. By allowing the webpage’s format and spacing to change based on the user’s writing style, it improves and becomes more responsive.

The directional qualities are considered in terms of:

Top
Right
Bottom
Left

The physical configuration of the user’s device is referred to by these names in the physical properties.

Logical properties are considered in terms of:

block-start
block-end
inline-start
inline-end

When opposed to directional qualities, logical attributes offer more flexibility. The spacing and arrangement of the material will adjust to reflect the user’s changing writing mode (language style).

CSS Logical Properties

CSS logical attributes Use the terms “block” and “inline” to clarify the writing’s direction.

Block properties: In CSS, “block properties” refer to logical attributes that manage the size and spacing of layout elements around the block axis, effortlessly adjusting to various writing styles and text orientations.

It usually matches the horizontal writing mode’s vertical dimension.

block-size: Indicates an element’s height.
margin-block-start: Determines the upper margin.
margin-block-end: Establishes the margin at the bottom.
padding-block-start: Defines the padding at the top.
padding-block-end: Affects the padding at the bottom.
border-block start: Establishes the upper boundary.
border-block-end: Indicates the border at the bottom.

Syntax:

element{
         block-property-name: value;
              }

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logical Block Properties</title>
    <style>
        body{
            background-color: wheat;
        }
        .main {
            background-color: skyblue;
            width: 350px;
            height: 150px;
            margin-block-start: 40px;  
            margin-block-end: 30px;
            padding-block-start: 20px;
            padding-block-end: 20px;
            border: 6px solid blue;
        }
    </style>
</head>
<body>
    <div class="main"> 
        <h1>Logical Block Properties</h1>
         <h2>Block properties example</h2>
    </div>
</body>
</html>

Output:

2. Inline properties: In CSS, “inline properties” are logical attributes that manage an element’s width and spacing around the inline axis so that it can easily adjust to various text orientations and writing styles.

This in horizontal writing forms usually corresponds to the horizontal dimension.

inline-size: Indicates an element’s width.
margin-inline-start: In left-to-right writing modes, this property sets the left margin.
margin-inline-end: In left-to-right writing modes, margin-inline-end sets the right margin.
padding-inline-start: In left-to-right writing modes, this sets the left padding.
padding-inline-end: In left-to-right writing modes, this setting sets the proper padding.
border-inline-start: In left-to-right writing modes, this defines the left border.
border-inline-end: Specifies the right boundary for writing modes that move from left to right.

Syntax:

Element{
         inline-property-name: value;
                   }

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logical Inline Properties</title>
    <style>
        body{
            background-color: rgb(198, 237, 250);
        }
        .main {
            background-color: skyblue;
            width: 350px;
            height: 150px;
            margin-inline-start: 25px;
            margin-inline-end: 40px;
            padding-inline-start: 15px;
            padding-inline-end: 20px;
            border: 6px solid blue;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1>Logical Inline Properties</h1>
        <h2>Inline Properties Example</h2>
    </div>
</body>
</html>

Output:

PROPERTY	DESCRIPTION
inline-size	comparable to the property of breadth.
max-inline-size	The property’s equivalent to max-width.
min-inline-size	The property’s equivalent to min-width.
block-size	The attribute that corresponds to height.
max-block-size	max-height is equal to max-block-size.
min-block-size	min-height is equal to min-block-size.
margin-block-start	The top margin is the same as margin-block-start.
margin-block-end	The bottom margin is equivalent to margin-block-end.
margin-inline-start	The left margin’s equivalent.
margin-inline-end	The appropriate margin.
border-block-start	border-top is the same as border-block-start.
border-block-end	border-bottom is equal to border-block-end.
border-inline-start	The border-left equivalent.
border-inline-end	The border-right equivalent.
inset-block-start	The same as top.
inset-block-end	The opposite of bottom.
inset-inline-start	left is equivalent to inset-inline-start.
inset-inline-end	The right equivalent

Examples: (1) A syntactical guide to using CSS’s logical features.

<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <style>
        html 
        {
            background: lightpink;
        }
        .adding-border 
        {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.5;
            color: #2f4f4f;
            padding: 2rem;
            border-inline-start: 1rem purple solid;
            border-block-start: 1rem blue solid;
            border-inline-end: 1rem green solid;
            border-block-end: 1rem red solid;
        }

        .inline-start 
        {
            color: green;
        }
        .block-start 
        {
            color: blue;
        }
        .inline-end 
        {
            color: purple;
        }
        .block-end 
        {
            color: red;
        }

        h2 {
            margin: 0.20rem;
        }
        .container{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div style="text-align: center">
       <h1 style="color: blue">Codershot</h1>
    </div>
    <div class="container">
        <div class="adding-border">
            <h2 class="block-start">block-start</h2>
            <h2 class="block-end">block-end</h2>
            <h2 class="inline-start">inline-start</h2>
            <h2 class="inline-end">inline-end</h2>
        </div>
    </div>
</body>
</html>

Output:

Example: (2) Demonstrate the distinction and application of inline and block logical features.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <style>
        * 
        {
            margin: 0;
            box-sizing: border-box;
        }
        body
        {
            background-color: black;
            padding: 10px;
            text-align: center;
        }
        main 
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #border-block 
        {
            border-block: 11px solid green;
            font-size: 101px;
            width: 801px;
            margin-block-end: 151px;
        }
        #border-inline 
        {
            border-inline: 11px solid green;
            font-size: 101px;
            width: 801px;
        }
       
    </style>
</head>
<body>
    <header>
        <h1 style="color: blue">Codershot</h1>
    </header>
    <main>
        <p id="border-block" style="color: white">border-block</p>
        <p id="border-inline" style="color: white">border-inline</p>
    </main>
</body>
</html>

Output:

Important Considerations of CSS Logical properties

When utilizing the logical characteristics of CSS, keep in mind:

Adaptability: They can write in both vertical and horizontal orientations, as well as in LTR and RTL text directions.
Consistency: Maintain a consistent look across all locations.
Fallbacks: To support older browsers, provide physical property fallbacks.
Shorthand: For efficiency, use shorthand logical properties (padding-block, margin-inline, etc.).
Layouts: Use Flexbox and CSS Grid with ease.
Testing: Check designs over a range of text directions and writing styles.
Accessibility: Make text easier to read and navigate across various writing systems and languages.