Элемент с display: none занимает место на странице. Почему?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript</title>
		<style type="text/css">
			#if_girl{display: none;clear: both;}
			#ifn_girl{display: none;clear: both;}
		</style>
	</head>
	<body>
		<select id="is_girl" onChange='showSelect()'>
			<option value='0'>Мальчик</option>
			<option value='1'>Девочка</option>
		</select>
		<br>
		<select id="if_girl" onChange='showSelect()'>
			<option value="1">Собака</option>
			<option value="0">Кошка</option>
		</select>
		<br>
		<select id="ifn_girl" onChange='showSelect()'>
			<option value="1">Пёс</option>
			<option value="0">Кот</option>
		</select>
		<script>
			const isGirl = document.getElementById("is_girl").value;
			if(isGirl == 1){
				document.getElementById("if_girl").style.display = "inline";
				document.getElementById("ifn_girl").style.display = "none";
			}
			else if(isGirl == 0){
				document.getElementById("ifn_girl").style.display = "inline";
				document.getElementById("if_girl").style.display = "none";
			}
			function showSelect(){
				const isGirl = document.getElementById("is_girl").value;
				if(isGirl == 1){
					document.getElementById("if_girl").style.display = "inline";
					document.getElementById("ifn_girl").style.display = "none";
				}
				else if(isGirl == 0){
					document.getElementById("ifn_girl").style.display = "inline";
					document.getElementById("if_girl").style.display = "none";
				}
			}
		</script>
	</body>
</html>


Однако элемент select всё равно занимает место.
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
МальчикДевочка
СобакаКошка
ПёсКот


LOLOL.

По делу: где код?

Элемент с display: none не может в принципе занимать место в разметке, потому что он как бы полностью исключён из потока вёрстки.

Update. Место остается из-за двойного <br>. Выйти из ситуации можно хоть так, к примеру:


Или так:
br ~ br {
    display: none;
}
.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Deliver Москва
До 160 000 руб.
Smart Медицина Москва
от 120 000 руб.
Nordavind Москва
от 60 000 до 90 000 руб.
26 марта 2019, в 01:09
40000 руб./за проект
26 марта 2019, в 00:54
40000 руб./за проект
26 марта 2019, в 00:31
20000 руб./за проект