我有一个容器“body_step”。在这个容器中有两个区域。第一个是图片，第二个是文字。我将图像放在容器“image_step”中。现在我想在图像上添加一个底部边距。但是如果我写 margin-bottom: 5px; 它会做 margin-bottom: 25px;。我不想更改 line-height。
这是代码:
*{
margin: 0px;
padding: 0px;
font-size: 16px;
color: white;
text-decoration: none;
font-family: "Oswald",sans-serif;
}
body{
background-color: rgb(38, 38, 38)
}
nav{
width: 100%;
background-color: rgb(25, 25, 25);
}
.navbar_ul{
list-style-type: none;
width: 800px;
width: 1000px;
margin: 0 auto;
}
.navbar_li{
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 30px;
}
a{
color: #666;
display: block;
transition: color 0.2s ease-in-out 0s;
}
a:hover{
color: #CCC;
}
section{
margin: 0 auto;
margin-top: 25px;
margin-bottom: 50px;
width: 1012px;
}
.clearBoth {
clear:both;
}
article{
width: 750px;
border: 3px solid rgb(30, 30, 30);
background-color: rgb(75, 75, 75);
float: left;
}
aside{
width: 200px;
float: right;
}
.step{
width: 100%;
}
.header_step{
width: 100%;
background: rgb(30, 30, 30);
text-align: center;
padding: 10px 0px;
}
.body_step{
width 730px;
padding: 20px;
overflow: hidden;
text-align: justify;
}
.image_step{
margin-right: 20px;
margin-bottom: 5px;
float: left;
}<!DOCTYPE html>
<html>
<head>
<title>XXX</title>
<link rel="shortcut icon" href="title.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="navbar_ul">
<li class="navbar_li"><a href="http://www.google.de">Seite erstellen</a></li>
<li class="navbar_li"><a href="http://www.google.de">Seite löschen</a></li>
<li class="navbar_li"><a href="http://www.google.de">Seite bearbeiten</a></li>
</ul>
</nav>
<section>
<article>
<div class="step">
<div class="header_step">Hier steht die Überschrift</div>
<div class="body_step"><img class="image_step" src="bg.png" height="500px" width="500px">Hier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim v</div>
</div>
<div class="step">
<div class="header_step">Hier steht die Überschrift</div>
<div class="body_step"><img class="image_step" src="bg.png" height="50px" width="100px">Hier Hier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vHier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vHier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vsteht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim v</div>
</div>
<div class="step">
<div class="header_step">Hier steht die Überschrift</div>
<div class="body_step"><img class="image_step" src="bg.png" height="300px" width="500px">Hier stHier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vHier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vHier steht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veht Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim v</div>
</div>
</article>
<aside>
<a class="asd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a>
</aside>
<div class="clearBoth"></div>
</section>
</body>
</html>我的问题:如何给图像margin-bottom: 5px？
最佳答案
尝试将图像设置为:
display:block;
或
display:inline-block;
取决于你的其余布局
关于html - CSS 图像边距底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29870680/