Margin left right top bottom

.date {
    position: absolute;
    top: 10px;
    right: 30px;
}
.date {
    position: absolute;
    margin-top: 10px;
    margin-right: 30px;

Hello. Above are two samples, i’ve tried both and they both produce the same results. Is typing margin required in this case?

When you use position: absolute, you can arrange the element with top/right/left/bottom spacing relative to the nearest positioned ancestor.

In the top case, that’s what is happening. You are saying that I want the date element to have a space of 10px from the top of the nearest positioned ancestor and 30px from the right of the nearest positioned ancestor.

In the bottom case, you are saying you want it to be positioned absolute, but haven’t defined any particular top/right/left/bottom spacing. So, since you have margin-top and margin-right it’s just adding a space of 10px on the top of the .date element and 30px on the right of it. This spacing would look the same no matter where you move the .date element in the HTML, however with in the top case the actual positioning of the .date element would change based on where you move it in the HTML (that is, if the nearest positioned ancestor changes).

It would be helpful to see how you used the .date element in the HTML as well :grinning: but this is the overall idea.

1 Like