gpt4 book ai didi

html - 为什么我的 margin-top 不起作用?

转载 作者:太空宇宙 更新时间:2023-11-03 19:43:27 27 4
gpt4 key购买 nike

我有一个图像列表,我正在尝试移动但它不起作用。

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

我希望 #industrialDesignIMGmargin-top80px,但要么什么都没有移动,要么所有的 img元素移动。我该怎么做才能让我的 margin-top 正常工作?

最佳答案

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

参见 this JSFiddle without the top marginthis JSFiddle with the top margin .

关于html - 为什么我的 margin-top 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12787091/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com