я похоже понял щас проверю
Нет вопрос остается открытым. Заранее благодарен за помощь
Понятно вы объяснили свой вопрос. Я тоже не знаю, почему так получается. Но знаю, как исправить. Добавить внешний отступ сверху для block1.
Модератор тему эту прочитает и может разъяснит. Будем ждать. Мне тоже стало интересно)
Спасибо Ineska будем ждать ответа margin-top ом в 15пх да можно подогнать
1 лайк
Не знаю на сколько поможет , но если в HTML перед объявлением первого блока поставить
пустой абзац то в принципе тоже все выравнивается , но хотелось бы научное объяснение , что там куда “схлопывается” или чего))).
Так же пробовал в css абзацу прописывать внешний отступ снизу в принципе можно смоделировать ситуацию тогда как и с блоком1 получается
p{
background:#ecf0f1;
border:2px dotted #bdc3c7;
margin-bottom: 0px; (5px или 10px)
}
При таком раскладе блок 2 тоже начинает ехать. На сколько понимаю блок1 и блок2 когда мы их начинаем флоатить они стают как бы блочными элементами. А абзац текстовый. Поэтому ведут себя по разному. Но хотелось бы более углубленного ответа что ли по возможности.
Дело в то, что у абзацев <p> по умолчанию в браузерах есть отступы. Именно они и дают такой эффект в первом блоке:
<p>Как и позиционирование, float используется для того, чтобы двигать боксы.</p>
Вот он этот margin абзаца по умолчанию:
Это я понимаю но у нас в коде css есть внутренние отступы у контейнера
.container{
width:400px;
padding: 30px;
margin:20px auto;
box-shadow:0 0 2px #ccc;}
И на этот отступ эти элементы по разному реагируют
Те отступ у обзаца в плюс минус 15пх тридцаткой вроде как перекрывается
граница блока1 просто пролетает этот отступ как бы не замечая его
А если следовать логике что блок1 у нас блочный элемент то как бы вообще чехорда какая то
1 лайк
Не совсем понимаю, о чём вы 
Попробую завтра ещё разок на свежую голову взглянуть.
Тут просто в совокупности нада доводы абзаца если накидываете на первый блок то его и на второй накидывайте я с кодом в принципе разобрался относительно если ручками отступы у абзацев прописывать в css то такой чехорды нет,но почему первый и второй абзац ведет себя как бы по умолчанию по разному и блок 1 и блок2 ))) в общем без пол литра не объяснить))). Просто стало интересно. Может я сам на ночь глядя уже гоню )))
Просто в голове у меня некая каша с отступами поэтому вопрос и возник) с утра пересмотрел блочную модель о новой.
Первый случай.
<div class=" block1"></div>
<div class=" block2"></div>
css:
.block1, .block2 {
width: 96px;
height: 36px;
border: 1px solid white;
}
.block1 {
margin-bottom: 40px;
}
.block2 {
margin-top:20px;
}
Вывод Расстояние между блоками общее будет 40pх (ну если не учитывать бордеры) Те вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними
Второй случай:
Есть два блока блок1-родитель и блок-2 потомок внутри
<div class=" block1">
<div class=" block2"></div>
</div>
css:
.block1{margin: 60px auto;
width: 400px;
min-height:400px;
border: 1px solid white;
padding-top: 40px;}
.block2 {
width: 100px;
height: 60px;
border: 1px solid white;
margin-top: 20px;
}В данном случае вертикальный отступ между верхней границей блока1 и блока2 будет уже не 40 как в первом случае а 60пх, те они сложатся, точно так же как складываются горизонтальные отступы.
Те на сколько я понял отсюда эта разница в поведении между первым и вторым абзацем и вылезает.
Млин забить походу нада на этот абзац ))) Выставил верхний отступ у контейнера внутренний в 0 все ок . Но стоит туда хотя бы 1пх задать и опять сразу огромная разница 
Все равно тут в чем то другом замес еще. Не понимаю почему второй и последующие абзацы ведут себя по другому. Ineska если сможешь объяснить в чем я туплю и в чем тут дело буду благодарен если знаешь ответ.
Juwain писал выше: “Дело в то, что у абзацев
по умолчанию в браузерах есть отступы. Именно они и дают такой эффект в первом блоке:” Но у второго и следующих абзацев тоже же отступы или они отличаются от первого.
Не знаю пока) Вечером может покопаюсь. А может до этого времени кто-то другой прольет свет на эту темную историю)
<div class="container">
<div class="block">.block1</div>
<div class="abz1">Как и позиционирование, float используется для того, чтобы двигать боксы.</div>
<div class="block">.block2</div>
<p>Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.</p>
</div>
css
body{
font-family:‘PT Sans’, sans-serif;
}
.container{
width:400px;
padding:10px;
margin:20px auto;
box-shadow:0 0 2px #ccc;
}
.block{
// float:left; /*если поиграться с этими комментариями понятнее стает) */
width:80px;
padding:10px;
background:#3498db;
color:white;
border:2px solid #34495e;
}
p{ background:#ecf0f1;
border:2px dotted #bdc3c7;
}
//.abz1{margin-top: 15px; /*если поиграться с этими комментариями понятнее стает) */
margin-bottom: 15px;
background:#ecf0f1;
border:2px dotted #bdc3c7;
}
Некое подобие абзаца с помощью CSS из первого “абзаца”, если ставить и снимать //-комментарии вроде стало ясно. Если комментарии сняты.В верхнем случае container.padding-top+ abz1.margin-top=25px у текста и просто 10пх у “блока1” . Внизу суммировать не надо тк это два элемента друг над другом то отступы между блоком2 и abz1 ,абзацем2 и abz1 совпадают и равны максимальному отступу 15пх. Если комментарии поставить, случай когда верхний текст не абзац а просто текст, отступы посчитать тоже не сложно. Не знаю на сколько понятно смог расписать
1 лайк
Вы хоть сами поняли это всё?)
Да понял если не зациклился бы на этом вопросе то так и была бы каша с отступами в голове .
Еще задачу не хотите?