Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Logical Properties in CSS
In CSS, logical properties allow developers to define the style based on the logical structure of the web page rather than the physical layout. It means we can apply the CSS according to the text direction or content flow.
Mainly logical properties are used to set the HTML element's margin, padding, and border. It contains different variants of the margin, padding, and border property.
Logical properties can be defined according to the block and inline dimensions.
Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left to right. So, block dimensions handle the top and bottom of the element.
Inline dimension − The inline dimensions represent the same direction as the content or text direction. For English, left and right are inline dimensions.
Let’s look at some commonly used logical properties in CSS.
Border-block − It sets the top and bottom border.
Border-inline − It sets the left and right border.
Border-block-start − It sets the top border.
Border-block-end − It sets the bottom border.
Margin-inline − It sets the left and right margins.
Padding-inline − It sets the left and right padding.
Padding-inline-start − It sets the left padding.
Margin-inline-end − It sets the bottom padding.
Border-inline-end-width − It sets the width of the right border.
Border-block-start-style − It sets the style of the top border.
In the above properties, users can observe that we require to use ‘block’ for top and bottom and ‘inline’ for left and right. Also, ‘start’ for left and top, and ‘end’ for right and bottom.
Why Should we use Logical Properties Over Normal CSS Properties?
By observing the functionality of the above properties, the first question that comes to mind is whether we can achieve the same style using normal CSS properties and why we should use logical properties. Here is your answer.
Sometimes, we require to set the left and right margin for an HTML element. We can achieve it using the ‘0 auto’ value for the margin property or separately using margin-left and margin-right CSS properties. While using ‘0 auto’, we also change the value of the top and bottom margins if it is previously applied. So, it is better to use the ‘margin-inline’ CSS property.
margin: 0 auto; or margin-left: auto; margin-right: auto; or margin-inline: auto;
Syntax
Users can follow the syntax below to use logical properties in CSS.
padding-block-start: value; margin-inline-end: value;
In the above syntax, we have used the logical properties as we use other CSS properties.
Example 1 (Margins and Paddings Logical Properties)
In the example below, we have created two div elements and added the text inside them. In CSS, we used the ‘padding-block-start’, ‘padding-inline-start’, and ‘margin-block-end’ logical CSS properties for the first div to set top and left padding and bottom margin.
Also, we have used the ‘margin-inline-end’ logical CSS property to add the right padding to the div element.
<html>
<head>
<style>
.text {
padding-block-start: 20px;
padding-inline-start: 30px;
margin-block-end: 50px;
color: green;
background-color: red;
width: 300px;
font-size: 2rem;
}
.text1 {
width: 300px;
font-size: 2rem;
padding-block-start: 20px;
padding-inline-start: 10px;
margin-inline-end: 50px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h3> Using the <i> margins and paddings logical properties </i> in CSS </h3>
<div class = "text"> This is a text. </div>
<div class = "text1"> This is another text div element. </div>
</body>
</html>
Example 2
In the example below, we have demonstrated the logical CSS properties related to the border. We used the ‘border-block-start’ to apply the top border and the ‘border-block-end’ to apply the bottom border. Furthermore, we used the ‘border-inline-start’ to apply the left border and ‘border-inline-end’ to apply the right border.
In the output, users can observe the different borders for the different sides of the div element.
<html>
<head>
<style>
.sample {
border-block-start: 3px dotted blue;
border-block-end: 5px solid green;
border-inline-start: 10px double red;
border-inline-end: 5px groove yellow;
padding: 10px;
width: 300px;
height: 200px;
}
.left {color: red;}
.right {color: yellow;}
.top {color: blue;}
.bottom {color: green;}
</style>
</head>
<body>
<h2> Using the <i> Logical border </i> properties in CSS </h2>
<div class = "sample">
Observe the border of the div.
<p class = "left"> border inline start </p>
<p class = "right"> border inline end </p>
<p class = "top"> border block start </p>
<p class = "bottom"> border block end </p>
</div>
</body>
</html>
Example 3
In the example below, we applied the CSS logical properties related to the margin and padding in the flexbox. Here, we have created three div elements inside the container div element. After that, we used the ‘padding-inline’ to apply right and left padding in the container div element.
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-inline: 40px;
width: 500px;
background-color: bisque;
font-size: 2rem;
}
.item {flex: 1;}
</style>
</head>
<body>
<h3> Using the <i> margin-inline property </i> to set the inline margin </h3>
<div class = "container">
<div class = "item"> First </div>
<div class = "item"> second </div>
<div class = "item"> Third </div>
</div>
</body>
</html>
Users learned to use the logical properties in CSS. Mostly all logical properties are related to the margin, padding, and border. However, overflow related, some logical properties also exist that developers can read on the internet. While using the logical properties, users need to focus on the ‘block’ and ‘inline’ dimensions and ‘start’ and ‘end’’ directions.
124 Views
