Невозможно получить пробел между двумя строками

Question

Мне нужно пространство между двумя строками. Когда я использую <br/>, ничего не происходит, если я использую заполнение, ничего не происходит. Если я не использую стили блоков в div только текст перемещается вниз с дополнением и 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

Ваша проблема в ваших поплавках. Float выводит элемент из нормального потока.

Добавить класс для вас "staff" div и использовать это, чтобы очистить поплавки.

HTML

<div class="staff">  
    <img class="photo" alt="Taxeeta, Founder and CTO" src="http://placehold.it/350x350" />  
    <div class="intro" > 
     <h4 class="name">Siddharth</h4>  
     <h4 class="italics">Founder, CTO</h4> 
     <div 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 .</div> 
    </div> 
</div> 

<div class="staff"> 
    <img class="photo" alt="Taxeeta, Mentor" src="http://placehold.it/350x350" />  
    <div class="intro"> 
    <h4 class="name">Zubin</h4> 
    <h4 class="italics">Advisor</h4> 
    <div 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 .</div> 
    </div> 
</div> 

CSS

.staff 
{ 
margin-bottom:10px; 
clear:both;} 

.photo { 
    padding-right: 5%; 
    width:20%; 
    float:left; 
} 
.intro { 
    width: 60%; 
    padding-right: 10%; 
    padding-bottom:0px; 
} 

Теперь вы можете поместить запас на дне, содержащих дивы.

Смотрите эту скрипку: http://jsfiddle.net/2rj9u/1/

Вы можете также wan't посмотреть на использование display:inline-block вместо поплавков: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/.

На боковой ноте не используйте такие элементы, как h4, исключительно для стилизации.

Answer 2

<div display="block"> 

Добавить идентификатор или класс для этого и использовать CSS

id/class 
{ 
padding:10px; 
} 

Answer 3

набор маржу утра дно для класса фото

.photo { 
padding-right: 5%; width:20%; float: left; margin-bottom:40px; 
} 

в качестве примера: http://jsfiddle.net/parslook/Msxmp/

Answer 4

Я создал для вас скрипку. http://jsfiddle.net/RL4q9/2/ взгляните на это.

.photo 
    { 
    padding-right: 0%; float: left;width:100px; 
    padding-top:20%;; 
    } 

Надеюсь, вы хотели достичь этого. Проголосуйте.

Answer 5

Где и как в вашем html?

 padding-botom

- правильный способ использования. Не

 padding=bottom

. Попробуйте использовать этот CODE

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

Примечание: Использование BR тегов для межстрочного это плохая привычка.