CODEWITHSUNDEEP
htmlcss
Tsundoku
Tsundoku

Reputation: 9408

Why is my margin-top not working?

I have a list of images that I'm trying to move but it isn't working.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    </head>
    <body>
       <div id="wrapper">
           <h1>Portfolio</h1>
           <img src="assets/img/PHOTOGRAOHY.png" alt="Photography" width="214" height="183">
           <img id="industrialDesignIMG" src="assets/img/ID.png" alt="Industrial Design" width="232" height="183">
           <img src="assets/img/GraphicDesign.png" alt="Graphic Design" width="233" height="196">
           <img src="assets/img/animation.png" alt="Animation" width="198" height="142">
       </div>
    </body>
</html>
​

CSS:

#industrialDesignIMG {
    border:1px #fff solid;
    display: inline-block;
    margin-top: 80px;
}
#wrapper {
    width:960px;
    margin:0 auto;
}

I want #industrialDesignIMG to have a margin-top of 80px, but either nothing moves or all the img elements move. What can I do to get my margin-top working?

Upvotes: 0

Views: 8082

Answers (5)

mreq
mreq

Reputation: 6542

Use:

padding-top: 80px;

or:

position: relative;
bottom: -80px;

Upvotes: 1

devsathish
devsathish

Reputation: 2409

The default positioning of any element is static. Hence the ordering/positioning of any element will vary depends on the position of sibling elements. To be simple, just add CSS float: left to the image tags and assign margin for your specific image. Example:

#wrapper img { float: left; }

Now add margin to your #industrialImg. This move your header to corner. Just wrap all the img with a new div. That should work.

Upvotes: 0

Catfish
Catfish

Reputation: 19284

Float all of the images left.

img {
    float: left;
}

Upvotes: 0

jsweazy
jsweazy

Reputation: 1621

Images are inline elements. To fix this float each image to the left, this will make it a block element:

http://jsbin.com/ekojux/1/

img { float: left }

Upvotes: 4

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15184

It actually is being applied. It's just that since the images are all inline elements, they're inline with each other, so is appears they're all being shifted down 80 pixels because the images align at the bottom.

See this JSFiddle without the top margin and this JSFiddle with the top margin.

Upvotes: 6

Related Questions