Question

我有一个容器“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？

Answer 1

尝试将图片设置为：

display:block;

或

display:inline-block;

取决于您的布局的其余部分

CSS图像margin-bottom

1 个答案: