How to find direction or position of the property declared in CSS?

Question

When declaring margin property or padding properties which contains direction or position like TOP, BOTTOM, LEFT, RIGHT... How can I find which position the value is assigned?

For example,

h1
{
margin: 25px 50px 75px;
}


p
{
padding: 25px 75px;
}

I need to know which value is for left margin, right margin and so on. How to find it?

Dhanush K · Answer

Margin is nothing but the space between corners and the content. Now coming to the point. Example-1: h1{ margin: 50px; } This will apply 50px to all 4 sides of margin LEFT, RIGHT, BOTTOM, TOP. Example-2 p{ margin: 25px 75px; } This will apply 25px to vertical (TOP & BOTTOM) sides and 75px to Horizontal (LEFT & RIGHT) sides Example-3 p{ margin: 25px 50px 75px; } This will apply 25px to Top, 50px to Horizontal (Left & Right) sides, 75px to Bottom. Example-4 p{ margin: 25px 50px 75px 100px; } This will apply 25px to Top, 50px to Right, 75px to Bottom and 100px to Left Hope this would have cleared your question. Thank you!

Deepak Rawat · Answer

f you provide a single value without any keywords, that value will be applied to all four sides (top, right, bottom, and left) of the element's margin or padding. For example: margin: 10px; /* The value 10px will be applied to top, right, bottom, and left */ If you provide two values separated by a space, the first value will be applied to the top and bottom, and the second value will be applied to the left and right. For example: margin: 10px 20px; /* 10px will be applied to top and bottom, and 20px will be applied to left and right */ If you provide three values separated by spaces, the first value will be applied to the top, the second value will be applied to the left and right, and the third value will be applied to the bottom. For example: margin: 10px 20px 30px; /* 10px will be applied to top, 20px will be applied to left and right, and 30px will be applied to bottom */ If you provide four values separated by spaces, each value will be applied to a specific side in the following order: top, right, bottom, left. For example: margin: 10px 20px 30px 40px; /* 10px will be applied to top, 20px to right, 30px to bottom, and 40px to left */ By examining the number of values provided and their order, you can determine which position each value corresponds to.