Задать вопрос
@Hanry654
bootstrap

Почему не добавляется отступ в bootstrap?

Добавляю к тегу h2 "margin-top: 10px;" - не работает, с дивом тоже самое. Также пробовал "mt-sm-2" прописать, тоже не работает.

<!DOCTYPE html>
</html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>123</title>
		<link rel="stylesheet" type="text/css" href="src/main.css">
		<link rel="stylesheet" type="text/css" href="src/css/bootstrap.css">

	</head>
<body>
	<div class="container panel">
		<h2>
			Тест
		</h2>
		<hr>
	</div>

	<script src="src/js/bootstrap.js"></script>
	<script src="src/js/popper.min.js"></script>
	<script src="src/js/jquery-3.5.1.js"></script>
</body>
</html>


body{
	margin: 0px;
	padding: 0px;
	background-image: url(img/background.jpg);
	background-size: 110%;
}

.panel{
	background-color: #F5F5F6;
	margin-top: 250px;
	opacity: 0.90;
	border-radius: 5px;
	box-shadow: 0 0 50px black;
	height: 250px;
}

h2{
	margin-top: 10px;
	text-align: center;
}
  • Вопрос задан
  • 807 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@cheeroque
Потому что сначала подключаете свой main.css, а потом bootstrap.css. У всех заголовков в бутстрапе верхние отступы сбрасываются в 0, в вашем main.css специфичность у заголовка такая же, в результате стили для него перезаписываются бутстрапом, который подключен позже кастомного css.

Поменяйте местами импорты CSS:

<link rel="stylesheet" type="text/css" href="src/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="src/main.css">


Другая проблема в том, что даже если margin-top будет работать, отступа от верхнего края карточки всё равно не получится :) Так что здесь действительно лучше использовать padding. Но, по-моему, логичнее его прикрутить к самой карточке, тогда отступ останется, если вы вдруг решите сменить заголовок h2 на что-то другое:

.panel {
  padding-top: 10px;
}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
@Lynatik001
юзай padding-top: 20px;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Middle Backend Developer (NestJS / TypeScript)
Media Code • Москва
от 150 000 до 200 000 ₽
Product Owner (Junior)
Uniscan Research • Новосибирск
от 90 000 ₽
Руководитель отдела тестирования/QA Lead
Uniscan Research • Новосибирск
от 175 000 до 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы