Treehouse: Grow your CSS skills. Land your dream job.

Margin top or padding top wont work!! :S

  • # March 7, 2011 at 10:40 am


    Im trying to give a slideshow of images a 50px space above. I cant get margin-top: 50px; or padding-top: 50px; to work. Really confused! I know its probably something stupid I missing!!

    Heres the link to it with margin-top: 50px; Click here. I dont want the whole container with the bubble wrap to move down 50px, just the slideshow!??..

    Heres the link to it with padding-top: 50px; Click here. Nothing Happens!

    Thanks for your help!

    # March 7, 2011 at 11:15 am

    Add overflow:hidden to the Wrapper

    # March 7, 2011 at 11:22 am

    go with the margin. Add 1px top padding to the header and reduce its height by the same 1px.

    research collapsing margins for the reason why. also, you should validate – you have 4 errors. while anchors are allowed to contain block-level elements in html5, they can’t be children of a ul – only li’s can. Just put the anchor within the li and set to display: block;

    @TT_Mark, there is no wrapper, or any floats for that matter (other than the list items in the nav, which are accounted for). What will overflow: hidden do?

    # March 7, 2011 at 11:50 am

    Sorry, I meant to the header (he said bubble ‘wrap’ and it’s only Monday ;-) ), and the one with the margin on rather than the padding. It’s basically because it assumes the header does not actually start until the slideshow because there is no content positioned relatively within it. Or something like that

    While overflow:hidden works, it’s probably not the best way. You should probably position the slideshow relatively within the header div.


    position: relative;
    top: 50px;

    on the slideshow and this should work fine

    # March 7, 2011 at 1:03 pm

    actually, you were right with overflow:hidden, which changes the display context of header and gives the margin of the slideshow something to push against. I had forgotten about that…

    I would not recommend the relative positioning in this instance.

    # March 7, 2011 at 4:29 pm

    overflow: hidden; did the job. Thanks Guys

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.