Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
sergei2210
0 / 0 / 0
Регистрация: 07.04.2016
Сообщений: 103
1

Свойство margin при float

27.10.2016, 17:16. Просмотров 866. Ответов 3
Метки нет (Все метки)

Почему если мы родительскому элементу придаем свойство float то margin-top работает в рамках родителя.
Если не задаем то margi-top будет работать для родительского:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="block1">
    <div class="block2"></div>
    <div class="block3"></div>
</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.block1{
    width:300px;
    height:400px;
    background-color:gainsboro;
    margin:50px 50px 50px 50px;
}
.block2{
    width:220px;
    height:160px;
    background-color:red;
    margin-top:100px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
}
.block3{
    width:220px;
    height:160px;
    background-color:blue;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
}
http://jsbin.com/likijusabu/edit?html,css,output
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.10.2016, 17:16
Ответы с готовыми решениями:

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый...

Почему при указании float не работает margin
Почему при float не работает margin 0 auto

margin-left и float с min-width
Вот такая проблема. Вот код: &lt;div style=&quot;float: left; width: 20%; min-width:...

Разница между :float,margin,position
Доброго времени суток! Подскажите пожалуйста в чем разница и когда что...

Свойство column свойства margin
Есть свойства: p { column-count: 4; /*Количество колонок в...

3
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
27.10.2016, 17:22 2
А если задать родительскому блоку
CSS
1
overflow: hidden;
то все работает одинаково, как с флоатом, так и без него. Действительно странно.
0
sergei2210
0 / 0 / 0
Регистрация: 07.04.2016
Сообщений: 103
27.10.2016, 17:27  [ТС] 3
Цитата Сообщение от mrtoxas Посмотреть сообщение
то все работает одинаково, как с флоатом, так и без него
Действительно а почему так?
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
27.10.2016, 17:27 4
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

А говорите, что читали и в курсе про схлопывание.
Схлопывание не срабатывает:
для элементов, у которых установлено свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.

Также схлопывание не срабатывает при соблюдении некоторых условий:
для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не действует для их дочерних элементов;
у элементов, к которым применяется свойство clear, не схлопывается верхний отступ с нижним отступом родительского элемента.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.10.2016, 17:27

Свойство margin не срабатывает в FireFox
Что может быть, если свойство margin-right не срабатывает в Файр Фоксе? В Опере...

Не работает свойство Float
Делаю набросок своего первого сайта , но не могу понять почему не работает...

В каком случае рекомендуется использовать :margin,padding,float,position:absolute,position:relative
В каком случае рекомендуется использовать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru