Div-ы цепляются друг за друга

@execto · Регистрация: 16.12.2013

Здравствуйте. Подскажите пожалуйста почему когда допустим .positioner или .title задаешь margin-top, то смещается и .head, а margin-left and margin-right такого не происходит. Ведь по сути у .positioner and .title родительский элемент это .head, значит внешние отступы должны считаться относительно границы .head, а не окна браузера.

HTML5

<html>
<head>
 <title>Практика</title>
 <link rel="stylesheet" href="C:\Users\alel\Desktop\style.css">
</head>
<body>
<div class="box">
 <div class="head">
   <div class="positioner">
     <div class="title">Design Studios</div>
     <div class="menu"></div>
   </div>
 </div>
</div>
 
</body>
</html>

CSS

head {
    margin: 0;
    padding: 0;
}
 
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
 
.head {
    width: 1100px;
    height: 113px;
    background: url("C:/Users/alel/Desktop/header.png");
    margin: auto;
}
 
.positioner {
    width: 900px;
    background-color: red;
    margin: auto;
}
 
.title {
    padding: 20px;
}

@Vadim_Lasso · 22.11.2015, 19:40

execto, добавьте в .head {} свойство overflow: auto;

CSS

.head {
    width: 1100px;
    height: 113px;
    background: url("C:/Users/alel/Desktop/header.png");
    margin: auto;
    overflow: auto;
}

@execto · 22.11.2015, 20:00 **[ТС]**

Сообщение от Vadim_Lasso

execto, добавьте в .head {} свойство overflow: auto;

Спасибо, помогло. Но если не сложно можете объяснить логику отступов в моем случаи, почему так происходило.
И простым языком почему от overflow так происходит.

@mrBobrillo · 22.11.2015, 23:26

execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title?

@execto · 23.11.2015, 08:35 **[ТС]**

Сообщение от mrBobrillo

execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title?

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

@mrBobrillo · 23.11.2015, 10:09

Ну смотрите, если хотите чтоб сайт не был прижат к верхней части экрана, то это можно сделать 2мя способами, или задать вашему общему блоку не margin: auto, а margin: 20px auto 0 auto;
Т.е слева и справа будет авто, центрироваться по середине экрана, а сверху 20 пикселей, снизу 0, так как ничего не задаем.
Или же задать у общего блока сверху паддинг в 20 пикселей.
Это если я конечно правильно понял суть вашей мысли.

@execto · 23.11.2015, 11:44 **[ТС]**

mrBobrillo, не совсем правильно, сайт должен быть прижат, но .positioner, который находится внутри .head не должен прижиматься к верху блока .head

@mrBobrillo · 23.11.2015, 11:46

Сообщение от mrBobrillo

Или же задать у общего блока сверху паддинг в 20 пикселей.

Делаете у class="box" так и никаких лишних движений не нужно

@execto 2 / 2 / 1 Регистрация: 16.12.2013 Сообщений: 73
	22.11.2015, 20:00 [ТС]	3
	Сообщение от Vadim_Lasso execto, добавьте в .head {} свойство overflow: auto; Спасибо, помогло. Но если не сложно можете объяснить логику отступов в моем случаи, почему так происходило. И простым языком почему от overflow так происходит. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	22.11.2015, 23:26	4
	execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title? 0

@execto 2 / 2 / 1 Регистрация: 16.12.2013 Сообщений: 73
	23.11.2015, 08:35 [ТС]	5
	Сообщение от mrBobrillo execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title? изначально я только для .positioner хотел так сделать. ну чтоб отступ у блока был сверху, а не был прижатым. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	23.11.2015, 10:09	6
	Ну смотрите, если хотите чтоб сайт не был прижат к верхней части экрана, то это можно сделать 2мя способами, или задать вашему общему блоку не margin: auto, а margin: 20px auto 0 auto; Т.е слева и справа будет авто, центрироваться по середине экрана, а сверху 20 пикселей, снизу 0, так как ничего не задаем. Или же задать у общего блока сверху паддинг в 20 пикселей. Это если я конечно правильно понял суть вашей мысли. 0

@execto 2 / 2 / 1 Регистрация: 16.12.2013 Сообщений: 73
	23.11.2015, 11:44 [ТС]	7
	mrBobrillo, не совсем правильно, сайт должен быть прижат, но .positioner, который находится внутри .head не должен прижиматься к верху блока .head 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	23.11.2015, 11:46	8
	Сообщение от mrBobrillo Или же задать у общего блока сверху паддинг в 20 пикселей. Делаете у class="box" так и никаких лишних движений не нужно 0

Опции темы