为什么我的保证金不起作用?

Tsu*_*oku 0 html css

我有一个我想要移动的图像列表,但它不起作用.

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>
?
Run Code Online (Sandbox Code Playgroud)

CSS:

#industrialDesignIMG {
    border:1px #fff solid;
    display: inline-block;
    margin-top: 80px;
}
#wrapper {
    width:960px;
    margin:0 auto;
}
Run Code Online (Sandbox Code Playgroud)

我想#industrialDesignIMG有一个margin-top80px,但无论是什么动作或所有img元素移动.我该怎么做才能让我的margin-top工作?

Rod*_*eas 6

它实际上被应用.只是因为图像都是内联元素,它们彼此内联,所以看起来它们都被向下移动了80个像素,因为图像在底部对齐.

看到这个JSFiddle没有上边距,这个JSFiddle有顶部边距.