html - CSS image margin-bottom -
i have 1 container "body_step". in container 2 areas. first 1 picture , second 1 text. placed image inside container "image_step". want add margin-bottom @ image. if write margin-bottom: 5px; margin-bottom: 25px;. dont want change line-height. here code:
*{ 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 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 eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim vhier steht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim vhier steht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim vsteht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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 eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim vhier steht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim vhier steht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veht lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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 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 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 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>my question: how can give image margin-bottom: 5px?
try setting image to:
display:block; or
display:inline-block; depending on rest of layout
Comments
Post a Comment