html - 无法在两行之间获得空间

Question

我需要在两行之间留出一些空间。当我使用 <br/>什么都没有发生，如果我使用填充，什么也没有发生。如果我不在 div 中使用 block 样式，则只有文本会随着填充和 br 向下移动。图像只是不动。

<h1>The Team</h1>
    <style type="text/css">
        .photo {
            padding-right: 5%;
            width: 20%;
            float: left;
        }
       .intro {
            width: 60%;
            float: right;
            padding-right: 10%;
            padding-bottom: 0px;
       }
       .name {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: bold;
            line-height: 0px;
            padding-top: 0px;
            color: #000000;
            padding-bottom: 0px;
            text-transform: uppercase;
       }
       .introduction {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            padding-bottom: 20px;
            font-weight: regular;
            line-height: 20px;
            color: #000000;
       }
       .italics {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-style: italic;
            line-height: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            line-height: 0px;
            color: #000000;
      }
      td {
          padding: 0px;
      }
      tr {
          padding=bottom: 40px;
      }
</style>

<div display="block">
   <div display="block">
      <img class="photo" alt="Taxeeta, Founder and CTO" src="http://localhost/taxeeta/wp-content/uploads/2013/09/dummy-picture1.png" />
   </div>
   <div class="intro" display="inline">
      <h4 class="name">Siddharth</h4>
      <h4 class="italics">Founder, CTO</h4>
      <h4 class="introduction">Having invested bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</h4>
   </div>
</div>
<br/>
<div display="block">
    <div display="block">
       <img class="photo" alt="Taxeeta, Mentor" src="http://localhost/taxeeta/wp-content/uploads/2013/09/dummy-picture1.png"/>
    </div>
    <div class="intro" display="inline">
       <h4 class="name">Zubin</h4>
       <h4 class="italics">Advisor</h4>
       <h4 class="introduction">Zubin is a bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</h4>
    </div>
</div>

现在看起来像下面这样:

Answer 1

您的 html 中的 和 标签在哪里？

 padding-botom 

is the correct way of using. Not

 padding=bottom 

. Try using this CODE

    .photo {
       padding-right: 0%; width:30%;  float: left;
       padding-top:20%;
       height:50% 
    }

注意:使用 br 标签作为行间距是一个坏习惯。