CODEWITHSUNDEEP
htmlcssmargin
Asaf
Asaf

Reputation: 2035

Applying margin-bottom to an element

I tried positioning a div element using margin-bottom. For some reason the margin-bottom doesn't appear to affect the position of the element. I tried searching for an answer, though all answers had something to do with position:absolute, and I still couldn't get it to work.

However, I did manage to position it using a negative margin-top, but I'm still curious to know what causes it not to work.

Heres the fiddle showing the HTML/CSS.
(what I'm talking about is the image. The margin-bottom is set to 100px.)

Upvotes: 1

Views: 160

Answers (4)

Jill-Jênn Vie
Jill-Jênn Vie

Reputation: 1841

Consider adding display: block.

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

Use one of the following:

  • Negative (or simply smaller) margin-top
  • position: relative and a negative top

Further explanation:

margin-bottom, in normal document flow, will only affect the position of elements that come after it, due to the fact that normal block-level elements will expand their height with the height of their children. Thus, the position of your element is determined by the elements before it, as well as its own margin-top.

Upvotes: 0

Marcio Mazzucato
Marcio Mazzucato

Reputation: 9295

Try to put the position absolute property in the DIV with the class "productImage". Like this, for example:

.productImage {
    display: block;
    float: left;
    position: absolute;
    left: 450px;
    top: 60px;
}

Using this i've manipulated the image sucessfully. I hope it can help you.

Upvotes: 1

user1337
user1337

Reputation: 847

A margin on the bottom would only work if the element was positioned via bottom somehow. Right now, it's positioned based on its top and that is being set by the H1. If you don't want the H1 to be a block, set it to display:inline-block. You could also set the width to be that of the paragraph.

As you noted, this is why a negative margin-top works.

Upvotes: 0

Related Questions