Why can't floated elements set their left and right margins

Question

In a wrapper div, the floated elements don\'t seem to respond to left and right margin settings. Example:

html:

    <         


        
      

Answer 1

A more recent CSS technique that works perfectly in this scenario is to use the CSS transform property with a translate X or Y. This acts on the floated element only, so does not have the unintended effect of moving other elements around.

An example transform is this:

.floated-element {
  // move the floated element 10 pixels to the left
  transform: translateX(-10px);
}