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

@Marcus's answer is good. Another way to fake having margins on a floated element is to put the content inside of another container and use padding:

.outer
{
    float: left;
    padding: 10px;
}

.inner
{
}

Answer 2

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);
}

Answer 3

Margins do not move floated elements, they "push content away".

If you want to move the floated element, you could give it the following CSS rules:

#content {
    position: relative;
    left: 30px;
}

An alternative is giving the element a transparent border:

#content {
    border-left: 30px transparent;
}

If you are just looking to position a div inside of another div, then use absolute positioning:

#wrapper {
    position: relative; /* required for absolute positioning of children */
}

#content {
    position: absolute;
    left: 0;
}