0

У меня возникло несколько вопросов по данному html-коду.

<html>

<head>
	<style>
		body {
			margin: 0;
		}
		
		.my_div {
			background-color: LightGray;
			height: 100px;
			width: 300px;
			display: inline-block;
		}
			
		form#my_form {
		<!--
			padding: 1px;
			margin: 0;
		-->
			height: 100px;
			width: 300px;
			background-color: LightGray;
			display: inline-block;
		}
			<!--
			form#my_form input {
				margin-top: 0;
			}
			
			form#my_form button {
				margin-top: 0;
			}
			-->
	</style>
</head>

<body>
	<form id="my_form" action="">
		<input type="text" />
		<button type="submit">Submit</button>
	<!--<input type="submit" value="Submit" />-->
	</form>
	<div class="my_div"></div>
	<div class="my_div"></div>
	
</body>

</html>

  1. Главный вопрос! Откуда у формы взялся верхний отступ и, собственно, как его убрать? Где только не пробовал вставить margin: 0 ничего не менялось.
  2. В статье про схлопывающиеся отступы говорилось, что

Для обнуления появившегося отступа, который нам на самом деле не нужен, есть разные пути. Поскольку схлопывание не работает для блоков с полями и границами, можно задать значение padding для слоя content. Главное, чтобы значение было больше нуля, подойдет даже 1px. Также добавление границы ко всем сторонам или только линии для верхнего края отменит схлопывание. Ещё один способ — обнулить верхний отступ у и заменить его на padding-top при необходимости. Использование свойства overflow со значением auto также даст необходимый эффект. Ниже все эти методы сведены воедино.

Почему тогда все закомментированые участки кода не помогают? Помогает только overflow: auto.

  1. Во время попытки найти решение заметил очень странное поведение со следующим участком кода (закомментированым, что меня, если честно, вообще поразило)

<!--
	padding: 1px;
	margin: 0;
-->

Суть в том, что если этот кусок кода удалить, то высота формы будет равна 100px как и полагается. Но вот если его оставить, то, по неизвестной мне причине, свойство height: 100px игнорируется и вычисляется по высоте вложенных элементов.

  1. Как в форме текстовое поле и кнопку разместить снизу? vertical-align не срабатывает. И, напоследок, <input type="submit"> и <button type="submit"> дело вкуса или есть основания использовать что-то одно?
7
  • Скорее всего взялся из inline-block... Расскажите что вам нужно получить, тогда можно будет подумать как это можно будет реализовать. 14 дек 2017 в 12:58
  • Такие штуки лучше всего делать через flex либо float. 14 дек 2017 в 13:00
  • 2
    vertical-align: top; необходимо поставить. По умолчанию - vertical-align: baseline
    – soledar10
    14 дек 2017 в 13:00
  • @ДмитрийПолянин мне нужно сделать так, чтобы между блоками не было никаких отступов. 14 дек 2017 в 13:02
  • @soledar10 Спасибо, вам огромное, помогло :) А не подскажете, что происходит в 3-ем пункте? И как убрать отступы между inline-блоками? 14 дек 2017 в 13:05

1 ответ 1

2

inline позиционирование в основном сделано для размещения слов и эллементов в тексте, как раз поэтому и появляются отступы между эллементами. Для блочной компоновки поочереди лучше всего использовать Flexbox:

.container {
  display: flex;
  flex-wrap:wrap;
}

.my_div {
  background-color: LightGray;
  height: 100px;
  width: 300px;
}
			
form#my_form {
  height: 100px;
  width: 300px;
  background-color: LightGray;
}
    
.d1 {
  background-color: red;
}

.d2 {
  background-color: green;
}
		
<div class="container">
  <form id="my_form" action="">
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
  <div class="my_div d1"></div>
  <div class="my_div d2"></div>
</div>

Ваш ответ

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

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