Элемент с 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 всё равно занимает место.
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
МальчикДевочка
СобакаКошка
ПёсКот


LOLOL.

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

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

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


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

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

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.
18 янв. 2019, в 14:12
70000 руб./в месяц
18 янв. 2019, в 13:24
500 руб./за проект
18 янв. 2019, в 13:04
12000 руб./в месяц