Доброго времени суток, гости блога и мои верные подписчики! В текущей статье я предлагаю вам разобраться с одной небольшой проблемой, иногда возникающей при подгонке дизайна сайта под свои нужды. Это Bootstrap отступ сверху.
Я расскажу вам, как избавиться от навязчивых и никому ненужных отступов сверху страницы или наоборот, как их добавить. Ну что ж, меньше слов – больше дела. Так что поехали!
Причины возникновения «непослушания» у разметки
На самом деле существует огромное множество причин, по которым «непонятно откуда» могут возникнуть пустые места в диза йне. Однако во всех случаях эти отступы можно объяснить.
Я перечислю наиболее распространенные ситуации возникновения данной проблемы:
- Внешние и внутренние пробелы, установленные по умолчанию в каждом браузере;
- Использование элементов, у которых по стандарту прописаны определенные значения внешнего расстояния;
- Неправильная разметка веб-страницы и т.д.
К каждому из перечисленных пунктов существуют свои решения, которые оптимально решают возникшие неполадки. Я опишу наиболее популярное решения среди существующих.
Протест против отступов!
Каждый браузер имеет свои параметры, установленные по умолчанию. К ним относятся установка цветов и размеров шрифта, расстояние между краями окна браузера и контейнером body, стилем отображения изображений и т.д.
Для реализации кроссбраузерности, а значит и корректного отображения веб-сервисов во всех существующих браузерах, стоит сбросить стандартные значения. Для этого можно воспользоваться css reset.
Об этом механизме я писал в отдельной статье. Если вы не знакомы с таким приемом, то советую прочесть в соответствующей публикации. Самый простой способ реализации сброса – это обнулить значения внешних и внутренних отступов.
Давайте рассмотрим пример без использования фреймворка Бутстрап.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: orange;
}
h1{ background-color: white;}
</style>
</head>
<body>
<p>Очень важная информация!</p>
<h1>Отображение лендинга с параметрами браузера по умолчанию.</h1>
</body>
</html> |
Даже в этом простом случае вы можете заметить, что слева и сверху от тега h1 и простого текста виднеются и машут нам ручкой отступы. Чтобы их не было в стилевых правилась стоит прописать следующий код:
body {
…
margin:0;
padding:0;
}
Дополните css указанным текстом и сравните результаты.
А теперь воспользуйтесь Bootstrap, подключив его в хедере документа.
1 2 3 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
И далее удалите обнуления свойств margin и padding.
Заметили? Результат выполнения программы с фреймворком и с css reset одинаковый. Так что можно сделать вывод, что Бутстрап обеспечит вас кроссбраузерностью и решит проблему с отступами в данном случае.
А теперь добавим расстояние между объектами!
Для того чтобы добавить некие пустые пробелы между элементами веб-страницы, можно обратиться за помощью все к тем же margin и padding. Посредством указания положительных (а в некоторых случаях и отрицательных) значений решить поставленную задачу вполне реально.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {background-color: #fff;}
body {
background-color: orange;
padding: 5% 15%;
margin: 2% 29%;
}
h1, h3{ text-align: center;}
</style>
</head>
<body>
<h1>Внимание! Внимание!</h1>
<h3>Осенняя распродажа мужской обуви!</h3>
</body>
</html> |
Желаю удачи с решением вашей проблемы! Буду рад видеть вас и ваших знакомых в качестве подписчиков моего блога. До новых встреч! Пока-пока!
С уважением, Роман Чуешов
