Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Делаем отступ сверху на bootstrap 3 и сравниваем результат со сбросом css

Доброго времени суток, гости блога и мои верные подписчики! В текущей статье я предлагаю вам разобраться с одной небольшой проблемой, иногда возникающей при подгонке дизайна сайта под свои нужды. Это Bootstrap отступ сверху.

Я расскажу вам, как избавиться от навязчивых и никому ненужных отступов сверху страницы или наоборот, как их добавить. Ну что ж, меньше слов – больше дела. Так что поехали!

Причины возникновения «непослушания» у разметки

На самом деле существует огромное множество причин, по которым «непонятно откуда» могут возникнуть пустые места в диза йне. Однако во всех случаях эти отступы можно объяснить.

Я перечислю наиболее распространенные ситуации возникновения данной проблемы:

  • Внешние и внутренние пробелы, установленные по умолчанию в каждом браузере;
  • Использование элементов, у которых по стандарту прописаны определенные значения внешнего расстояния;
  • Неправильная разметка веб-страницы и т.д.

К каждому из перечисленных пунктов существуют свои решения, которые оптимально решают возникшие неполадки. Я опишу наиболее популярное решения среди существующих.

Протест против отступов!

css reset

Каждый браузер имеет свои параметры, установленные по умолчанию. К ним относятся установка цветов и размеров шрифта, расстояние между краями окна браузера и контейнером 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>

Желаю удачи с решением вашей проблемы! Буду рад видеть вас и ваших знакомых в качестве подписчиков моего блога. До новых встреч! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 52 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: