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

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more

Python Tkinter keyboard using bind -

i have problem using bind option can click button in keyboard, , call function once key pressed. tried taking other codes have similar purpose , saw i'm doing pretty same, though still have problem must've missed. thankful if me this. here's code: # -*- coding: utf-8 -*- #imports tkinter import * pil import imagetk, image import time import tkmessagebox #===========================================================================================================================================# #tkinter class class app(frame): def __init__(self, master=none): frame.__init__(self, master) self.pack() #===========================================================================================================================================# #game pieces classes class board: def __init__(self, rows = 7, columns = 6, picture_height = none, picture_width = none): self.rows = rows self.columns = columns self.picture ...
Read more