@Kkrit

Как работает margin: 0 auto?

Наверное извечный вопрос всех новичков - как же все таки работает margin
Почитав справочники и форумы, перелопатив множество различных роликов, увы, я так и не смогла ответить на этот вопрос себе.
Взываю к мастодонтам - как же мне все-таки отцентрировать блок?
html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Car Repair</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
	jdsnvckjd
	</div>
</body>
</html>

css
*,*::before, *::after{
	box-sizing: border-box;
}

.container{
	width: 1200px;
	margin: auto;
	background: rgb(172, 76, 184)
}
  • Вопрос задан
  • 1773 просмотра
Решения вопроса 2
@Kkrit Автор вопроса
немного пошаманив с max-width и другими значениями ширины у меня получилось
Не знаю, это магия какая-то, возможно, дело в основном в том, что мое окно не слишком широкоформатно и с открытой консолью как раз около 1200px и выходит ширины
62ee606a562c1872159277.png
62ee60864dee0629733249.png
Ответ написан
Комментировать
iamlorddop
@iamlorddop
margin просто задает отступы для блока. Ограничьте container определенной шириной (Например width: 1180px;) и потом тем что вы зададите блоку margin: 0 auto; означает что вы задаете сверху и снизу отступ ноль (первая цифра в margin), значение auto значит что вы центрируете блок. у margin это внешний отступ от блока
margin: (сверху снизу) (справа слева);
margin: справа слева снизу справа;
margin: со всех сторон;

https://developer.mozilla.org/en-US/docs/Web/CSS/margin советую почитать. А также полезно будет посмотреть https://www.youtube.com/playlist?list=PLM6XATa8CAG... как для новичка будет очень полезно
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
FeST1VaL
@FeST1VaL
Тихий
В чем именно вопрос?
Способов много. Ваш вариант работает, потому не могу понять в чем именно вопрос...
Ответ написан
@Skaizy
1.) width: 1200px; я бы заменил на max-width: 1200px; (учитесь делать блоки адаптивными)

2.) margin: 0 auto;
0 - означает что по вертикали margin 0px
auto - браузер считает что по горизонтали блоку нужно дать справа и слева одинаковое расстояние, таким образом его и центрирует.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы