0

Добрый день!

Собственно, не совсем понимаю, почему при изменении margin у блока #task, изменяется положение блока #field.

onload = function(){
	O("begin").onclick = function(){
		S("first").display="none";
		S("field").display="block";
	}
}
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');

body{
	width: 100%;
	height: 100%;
	font-family: 'EB Garamond', serif;
	background-color: lightyellow;

}
.container{
	width: 700px;
	height: 500px;
	margin:50px auto;
	background-color: #D9F1E4;
}
header{
	width: 100%;
	height:50px;
	border-bottom: 2px solid red;
	background-color: white;
	box-shadow: 0 0 10px black;
}
#first{
	width: 500px;
	margin:50px auto;
	text-align:center;
	font-size: 1em;
}
h1{
	color: black;
	font-size: 2em;
	letter-spacing: 2px;
	font-weight: bold;
	margin-left: 30px;

}
h2{
	padding: 50px 5px;
}
#first > button{
	width: 250px;
	height: 60px;
	margin: 30px;
	font-family: 'EB Garamond', serif;
	font-size: 1.0em;
	background-color: #D9F1E4;
	border: 0;
	box-shadow: 0 0 10px black;
	border-radius: 5px;
	
}
.field{
	widtH: 100%;
	height: 100%;
	display:none;
}
#task{
	width: 70%;
	height: 50px;
	border: 1px solid black;
	margin: 50px auto;
	border-radius: 5px;
	overflow:hidden;

}
#word{
	width: 80%;
	height : 100%;
	background-color: green;
	float: left;
}
#score{
	width: 20%;
	height: 100%;
	background-color:red;
	float:left;
	
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <link rel="stylesheet" href="http://vchubar.ru/service_files/reset.css">
    <link rel="stylesheet" href="../styles/scramble.css">
    <script src="https://cdn.rawgit.com/vchubar/mylib.js/21eaa6c8/mylib.js"></script>
    <script src="../js/scramble/scramble.js"></script>
    <title>Document</title>
</head>
<body>
	<header><h1>Scrambled!</h1></header>
	<div class="container">
		<div class="first" id="first">
			<h2>
				You have three chances to unscramble the word.<br>
				If you succeed, you get a point.<br>
				If you fail, you lose a point.
			</h2>
			<button id="begin">Let`s go!</button>
		</div>
		<div class="field" id="field">
			<div id="task">
				<div id="word">
				</div>
				<div id="score">
				</div>
			</div>
			<div id="result">
				<div id="enter">
				</div>
				<input type="submit">
			</div>
		</div>
	</div>
	
		
</body>
</html>

Прошу вас помочь мне в решении данной проблемы. Заранее спасибо!

2 ответа 2

1

Сложно сказать в чем причина такого поведения, кроме того, что "так и задумано", причина что-то в духе "потому что дочерний элемент не видит явно границы родителя", ну или это просто "фича". В любом случае знаю только 3 варианта решения:

.field { padding: .1px; } // Или другой положительный

или

.field { border: .1px solid transparent; } // Или другой положительный

или

.field { overflow: hidden; }
1

Схлопываются поля, потому что S("field").display="block" генерирует блок.

Подробней можешь здесь почитать: http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

2
  • Спасибо, но тогда в таком случае, почему например .field { overflow: hidden; }, расхлопывает обратно?
    – vladimirch
    10 окт 2017 в 8:52
  • @vladimirch, также схлопывание не срабатывает при соблюдении некоторых условий: - для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не действует для их дочерних элементов; - у элементов, к которым применяется свойство clear, не схлопывается верхний отступ с нижним отступом родительского элемента.
    – Kniha m
    10 окт 2017 в 9:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.