When three of four margins have the same value, must they all be listed?

HTML-CSS
1

If margin-top is set to X, but margin-bottom/right/left are all set to Y, is there a way for me to group the three together so that I don’t have to type:

.something {

margin-top: X;
margin-bottom: Y;
Margin-right: Y;
Margin-left: Y;
}

It just seems that there might be a shorter way of doing this to save time from typing out the remaining three margins since they have the same value.

For example:

.something {

margin-top: x;
margin-the-other-three: y;
}

Is there a variable that provides this sort of option?

Thank you in advance

2 
.something {
    margin: 10px 20px 30px 40px;
 /* Applies 10px top, 20px right, 30px bottom, and 40px left margin */
}
2 Likes
3

AHHHH!!! That’s right!!! I forgot that the previous lesson touched on that!!!

Thank you soooooooo much, you rock! :smiley:

2 Likes
4

I just realized it goes “North (top) East (right) South (bottom) West (left)”, just like a compass. Are all of the values laid out this way?

1 Like
5

The way values are arranged in CSS shorthand properties like margin , padding , and border follows a specific order: top, right, bottom, left—just like a compass.

2 Likes
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.