Question

我有一个我想要移动的图像列表，但它无效。

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

我希望#industrialDesignIMG拥有margin-top 80px，但要么无法移动，要么所有img元素都会移动。我该怎么办才能让margin-top工作？

Answer 1

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

请参阅this JSFiddle without the top margin和this JSFiddle with the top margin。

Answer 2

图像是内联元素。要将每个图像浮动到左侧，这将使其成为块元素：

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

img { float: left }

Answer 3

使用：

padding-top: 80px;

或：

position: relative;
bottom: -80px;

Answer 4

浮动所有剩下的图像。

img {
    float: left;
}

Answer 5

任何元素的默认定位都是静态的。因此，任何元素的排序/定位将取决于兄弟元素的位置。简单来说，只需将CSS float: left添加到图像标记中，并为特定图像指定边距。例如：

#wrapper img { float: left; }

现在为#industrialImg添加保证金。这会将您的标题移动到角落。只需使用新的img包装所有div。这应该有用。

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

5 个答案: