Маржа, имеющая влияние на несвязанный div

Я ударил стену здесь ...Маржа, имеющая влияние на несвязанный div

У меня есть заголовок, который я хочу выровнять по центру на странице. Я сделал это, используя #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.

Название завернуто в div, который, в свою очередь, находится внутри полноэкранного div.

Я тогда хотел увеличить верхнюю границу титула div, чтобы свести заголовок. Проще, да?

За исключением случаев, когда я добавляю в margin: 50px в стиль для div, содержащего заголовок, полноэкранный div перемещается вместе с ним.

Еще более раздражающе, когда я пытаюсь сделать то же самое с divs дальше по странице, все работает нормально.

Почему это происходит? См. Код и скриншоты для контекста.

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#landingArea { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-color: #6fc9ff; 
 
} 
 

 
#landingAreaContent { 
 
\t position: relative; 
 
\t margin: auto; 
 
\t text-align: center; 
 
\t background-color: blue; 
 

 
}#belowFold { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: white; 
 
} 
 

 
#belowFoldContent { 
 
\t position: relative; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Dancing Script', cursive; 
 
\t font-size: 60px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Becky's Pet Services</title> 
 
\t <link rel="stylesheet" type="text/css" href="bps2CSS.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet"> 
 
</head> 
 
<body> 
 

 
<div id="landingArea"> 
 
\t <div id="landingAreaContent"> 
 
\t \t <img id="langingAreaLogo" src=""> 
 
\t \t <h1>Becky's Pet Services</h1> 
 
\t </div> 
 
</div> 
 

 
<div id="belowFold"> 
 
\t <div id="belowFoldContent"> 
 
\t \t <h1>Welcome!</h1> 
 
\t \t <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p> 
 
</div> 
 

 

 
</body> 
 
</html>

P.S. Яркие цвета доступны только для видимости разделов. : D

источник

2016-08-17 Tom Jardine-Smith

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

#landingArea { 
    ... 
    overflow: hidden; /* or auto */ 
}

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#landingArea { 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    background-color: #6fc9ff; 
 
} 
 

 
#landingAreaContent { 
 
    position: relative; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: blue; 
 
    margin-top: 50px; 
 
} 
 

 
#belowFold { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 

 
#belowFoldContent { 
 
    position: relative; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Dancing Script', cursive; 
 
    font-size: 60px; 
 
}

<div id="landingArea"> 
 
    <div id="landingAreaContent"> 
 
     <img id="langingAreaLogo" src=""> 
 
     <h1>Becky's Pet Services</h1> 
 
    </div> 
 
</div> 
 

 
<div id="belowFold"> 
 
    <div id="belowFoldContent"> 
 
     <h1>Welcome!</h1> 
 
     <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p> 
 
    </div>

источник

2016-08-17 20:29:12 isherwood

Добро пожаловать. Спасибо, что комментарии не считаются ценными, поскольку они загромождают сеть. Пожалуйста, используйте голоса и акцепты, чтобы выразить признательность. – isherwood

Маржа, имеющая влияние на несвязанный div

ответ

Смежные вопросы