Откуда берутся непонятные отступы и почему не работает выравнивание справа?

Question

[Aleksey111]

1) Когда в блок с отзывом еще не добавил текст, все было нормально, но как только добавил и сделал его инлайн-блочным, у этого блока сверху появился отступ от блока родителя. Фото также было сбоку. Почему это происходит? Надеюсь понятно объяснил.
2) Почему картинка улетает из блока?
3) Почему не работает выравнивание справа у слова CUSTOMER в текстовом блоке с отзывом?
4) Еще второй блок#2(который содержит в себе саму фотографию и блок с отзывом) не выравнивался с помощью margin-left: auto с правого края, поэтому использовал нелюбимые флоаты. Дело в inline-block?
5) Есть ли ресурсы, где можно наконец понять, как ведут себя выпавшие из обычного потока элементы в каких либо ситуациях? и что на них действует, что не действует и так далее
6) Мне кажется без комментариев код был бы понятней, так?
Пожалуйста, не пишите мне свой код, мне нужно лишь указать на то, что я сделал не так и сказать, как надо делать)
Ориентировочную .png, по которой я делал, загружу.
https://codepen.io/Aleks70694/pen/XpaXrL?editors=1100#0
Спасибо)

Comments

[sergey]

посмотрел код и не понял что вы пытаетесь сделать: inline-block, float... тут настолько простая верстка, нужно знать всего лишь базис

[Aleksey111]

SM: float, чтобы выровнять по правому краю блок с DAVID SOUL, а инлайн блок для того, чтобы элементы друг за дружкой шли, а не занимали всю ширину до конца...

Answer 1

[Алексей Скляров]

Во-первых, инлайн блоки это не очень круто, тем более для отзывов с динамичной высотой.

Самый просто пример рассмотрим на сетке bootstrap:
1. Есть контейнер .row
2. В него помещается два блока с float:left
3. Добавляются свойства:

.row:after {
    content: " ";
    display: table;
    clear:both
}
.row:before {
    content: " ";
    display: table;
}

Это делается для, того чтобы убрать обтекание, раньше использовали clearfix,

Структура имеет вид:

<div class="row">
    <div class="col-md-6">Текст</div>
    <div class="col-md-6">Текст</div>
</div>

Вместо «Текст» вставляется обычный блок с вашим отзывом. И все, ваша салянка из float, inline никуда не годится. Инлайн блоки нужно использовать если заведомо известно, что элементы будут одинаковой высоты, например кнопки. Плюс при добавлении text-align:center, такие кнопки будут вести себя как обычный текст, т.е отображаться по центру. Очень удобно.

Чтобы проще было освоить - ознакомьтесь с Bootstrap. Очень простой инструмент, в любом случае вы будете писать то, что там уже давно написано.