Should I give the first element a right margin or the second element a left margin? - alignment

Question

This is a very basic CSS design question.
When I have two block-elements
+----------+ +----------+
|~~~~~~~~~~| |**********|
|~~~~~~~~~~| |**********|
|~~~~~~~~~~| |**********|
+----------+ +----------+
and I want to set the space between them, there are three possibilities:
Left block with right margin
Right block with left margin
Margin for both blocks
What are the pros and cons for each one and—most importantly—what is considered
best practice?

Answer 1

It is generally a good idea to choose a direction (margin-left OR margin-right) and to stick to it on the whole project so designing will be easier and more consistent.
For more on the subject you can read this blog post: Single-direction margin declarations
That said, margin-left on boxes means "I do not want to be too close to the box before me" while margin-right means "I do not want other boxes to be too close to me".
So on designs where boxes have a margin by default, use margin-right (and margin-bottom) and on designs where boxes have no margin by default, use margin-left (and margin-top) on the few boxes with a margin. If it is mixed, choose the direction that seems the most coherent to you and stick to it.

Answer 2

No pros and cons, it is totally on your design, what you want to go for, using margin-right will make the last element have margin-right for no good reason, so say for example, you have three boxes, floated to the left, or they are displayed inline-block so because of the right margin, the last box won't touch the extreme right of the template, instead it will wrap and move down.
Do you see the red space, it's margin-right for the last element, which you won't need. shifting it more will result your div to move down.
Solution?
If you are willing to support legacy browsers, assign a class to the last element and write margin-right: 0;, say you are having 3 li elements floated, so you will write
ul.class_name li.class_name {
margin-right: 0;
}
Else, you can use :last-child pseudo to get rid of the extra margin.
So it will be
ul.class_name li:last-child {
margin-right: 0;
}
Same thing will go for the left, but instead of using :last-child and margin-right you need to use margin-left and :first-child respectively.
Last but not the least, using margin on both sides, will create a space on both the sides, again, resulting in disorientation of your layout.
In the above case, you will have to use both, either assign class to first and last element, or you need to use :first-child and :last-child to get rid of margin on the left for first element and margin on the right for last element.
Conclusion: For the two boxes you have, you should use margin-right
and use a class or :last-child to remove the extra margin on the
last element.

Answer 3

It depends where you will use it and how you will use it there is no exact rule for this. However if you will use some grid system for elements it is best practice. If your element cannot be suitable for grid system you can use any approach.
P.S. And there is another possibility to use pseudo element after or before I guess.

Answer 4

Simple Answer: It depends
It all depends on what you are trying to do, and what elements are those.
For example, if your site is oriented to the left, and those are two floating divs, with the same class, you wouldn't want to use margin-left, because that will introduce some space on the left of the first block.
It obviously makes no sense to add margin to both elements, unless you have dynamic content that may appear in between.
So, other than the obvious styling manner that you want your page to have, there is no difference in performance, but mostly readability of your code