Как убрать отступы body
Перейти к содержимому

Как убрать отступы body

  • автор:

Как убрать отступы, создающиеся по краям сайта? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 6 лет назад .
Мучают белые полоски отступов, портящие внешний вид моего сайта. Как от них следует избавляться?
Отслеживать
user181100
задан 7 ноя 2016 в 12:38
181 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков

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

– user181100
7 ноя 2016 в 12:43
// Remove default margins, fix height html, body < height: 100%; margin: 0; padding: 0; >
3 янв 2017 в 12:48

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Еще это может быть margin у body, который задает user-agent (в chrome — это 8px). Попробуйте обнулить стили или как минимум margin у body.

Отслеживать
ответ дан 7 ноя 2016 в 12:51
3,354 10 10 серебряных знаков 14 14 бронзовых знаков

Если речь идет о шапке сайта(footer) которая заключена в div и вы хотите прижать её к краям экрана, то код CSS:

Эти свойства CSS могут помочь решить проблему, однако будьте осторожны с абсолютным позиционированием — для остальных элементов на странице ваш футер перестанет существовать и они могут повести себя непредсказуемо. Если absolute не подходит, попробуйте position:fixed;

Как убрать отступы по краям?

Здравствуйте. Я новичок в html и css. Никак не могу понять как убрать лишние отступы сверху и по бокам. Нужно чтобы верхняя панель была полностью по ширине сайта и сверху не было пространства. И еще вопрос: Размер текста лучше указывать в пикселях? Чтобы было всё адаптивно на любом браузере. Вот мой код:

1 2 3 4 5 6 7 8 9 10 11 12 13
 html> head> title>Мой первый сайт/title> meta charset="utf-8"> link rel="stylesheet" href="css\style.css"> /head> body> div> header class="welcome-header">h1>Добро пожаловать на сайт!/h1>/header> /div> /body> /html>
1 2 3 4 5 6 7
.welcome-header { margin: 0px; background-color: rgb(11, 79, 146); font-size: 20px; text-align: center; color: rgb(110, 190, 255); }

Лучшие ответы ( 2 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать отступы по краям страницы
Как отображающийся документ не растягивать по всей ширине? По краям должны остаться пустоты. Я уже.

Как использовать сетку Бутстрапа,чтоб по краям были пропорциональные отступы?
Есть задача сверстать страницу адаптивно с помощью сетки бутстрапа. Но возникла проблема — При.

Отступы по краям картинки
Помогите начинающему! Появились отступы по бокам картинки.<!doctype html> <html> <head> <meta.

Отступы по краям у Grid layout
Приветствую Вас, господа прохожие и мастера))) На днях решил сверстать навигационное меню на.

Эксперт JSЭксперт HTML/CSS

2572 / 1664 / 728
Регистрация: 13.03.2010
Сообщений: 5,566

Лучший ответ

Сообщение было отмечено Daniil4k как решение

Решение

html,body{margin:0;padding:0;}

Регистрация: 25.09.2019
Сообщений: 208
gogolik, слева и справа нормально стало, а сверху не убралось.

Эксперт JSЭксперт HTML/CSS

2572 / 1664 / 728
Регистрация: 13.03.2010
Сообщений: 5,566

Лучший ответ

Сообщение было отмечено Daniil4k как решение

Решение

h1{margin:0;}

Регистрация: 25.09.2019
Сообщений: 208
gogolik, Спасибо
Заблокирован

gogolik, а можно так главному заголовку делать? Прижимать его к остальной чуши?

Добавлено через 1 минуту

ЦитатаСообщение от Daniil4k Посмотреть сообщение

за что спасибо? За то, что верхний блок наехал на заголовок?
Регистрация: 25.09.2019
Сообщений: 208
Verolomstvo, Что не так? Говори конкретно.

1 2 3 4 5 6 7 8 9 10 11 12 13
 html> head> title>Мой первый сайт/title> meta charset="utf-8"> link rel="stylesheet" href="css\style.css"> /head> body> div> header>h1 class="welcome-header">Добро пожаловать на сайт!/h1>/header> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13
body {margin:0;} .welcome-header { height: 50px; padding: 0px; margin: 0px; background-color: rgb(25, 64, 112); font-size: 35px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-style: italic; text-align: center; color: whitesmoke; }

Эксперт JSЭксперт HTML/CSS

2572 / 1664 / 728
Регистрация: 13.03.2010
Сообщений: 5,566

Verolomstvo, можно. Отступ просто задать внешнему блоку.

А спасибо за то, что сделал так, как хотел ТС.

Заблокирован

gogolik, и как сео воспримет зажатый главный заголовок? Он его увидит, как полноценный h1?

Добавлено через 7 минут

ЦитатаСообщение от Daniil4k Посмотреть сообщение

Что не так? Говори конкретно

Раз: header — блочный, зачем его в div? Теперь загугли h1 блочный или строчный и нужно ли заголовок помещать в заголовок.

Добавлено через 6 минут
Daniil4k,

ты просто где-то увидел шаблон вида

header
main
footer

и теперь следуешь ему

Эксперт JSЭксперт HTML/CSS

2572 / 1664 / 728
Регистрация: 13.03.2010
Сообщений: 5,566

Verolomstvo, я думаю, что человек только учится и не нужно ему голову сходу забивать всякими seo-причудами. А вообще, да, увидит как полноценный заголовок. Главное, чтобы он был на «первом экране».

С точки зрения семантики нет ошибки в конструкции div>header. Потому что может быть общий контейнер, в который обёрнут контент. А уж в конструкции header>h1 вообще нет ошибки.

Заблокирован

ЦитатаСообщение от gogolik Посмотреть сообщение

header>h1 вообще нет ошибки
ну если только это не базовый шаблон, определяющий всего лишь где что находится примерно
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Появляются отступы по краям страницы
Имеется несколько страниц html и один css файл все страницы кроме index.html отображаются на весь.

Как убрать отступы
Как можно убрать отступы справа и слева? ссылка на сайт

Как убрать отступы тега br?
как убрать стандартное отступы которые дает тег br

Как убрать непонятные отступы?
Доброго всем времени суток. Возникла такая проблема, появился непонятный отступ снизу, суть в том.

Как убрать отступы слайдера
Есть стандартный слайдер шаблона Helix II, так вот у него есть отступы как по ширине так и по.

Как убрать лишние отступы
Здравствуйте, подскажите пожалуйста почему как убрать лишние отступы. Скриншот и архив прилагается.

Как убрать системные отступы?

https://jsfiddle.net/jndwsvyp/1/
Нигде не прописывал отступы, а белые полосы с боков и сверху есть, как это исправить и почему это возникло?

P.S. Предложения из серии:
margin: -8px;
не рассматриваются, потому что это колхоз.

  • Вопрос задан более трёх лет назад
  • 4975 просмотров

3 комментария

Простой 3 комментария

SmthTo

Rustam Bainazarov @SmthTo Куратор тега Вёрстка

Для этого есть любой reset.css.

webirus

SmthTo, ты принципиально ответы не пишешь в ответы, а только в комментарии?)

SmthTo

Rustam Bainazarov @SmthTo Куратор тега Вёрстка
Сергей Горячев, отвечу мемом: прост)))1)
Решения вопроса 1
Евгений Акулинин @forkhammer
Fullstack-разработчик (Django, Angular)

html, body

А вообще подключи reset.css

Ответ написан более трёх лет назад
Нравится 3 2 комментария
greg_13 @greg_13 Автор вопроса

Так, это сработало, но хотелось бы всё же уточнить, а как вообще эта проблема возникает?
И что за «reset.css»?

Евгений Акулинин @forkhammer

Отступы создает стандартный CSS, встроенный в браузер. У каждого браузера свой набор стилей по-умолчанию. Чтобы привести все к одному виду используют наборы стилей, например reset.css https://meyerweb.com/eric/tools/css/reset/

Ответы на вопрос 2

alex_shevch

Марти Макфлай @alex_shevch
Frontend Developer

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.
https://marksheet.io/css/reset.css

Просто подключаешь эти стили для каждого нового проекта.

Как убрать отступ сверху страницы в HTML?

При установке другого цвета шапки в HTML на сайте видно отступ сверху. Как его убрать?
Код шапки выглядит так:

Дополнен 6 лет назад
Дополнен 6 лет назад

Спс, Mail.ru

Лучший ответ
а таблицы стилей подгружаются? Где они?
Остальные ответы

html, body <
margin: 0;
padding: 0;
>
Используй инструменты разработчика, чтобы увидеть, что это за отступы. Возможно, это какое-нибудь меню с margin-top вылезло.

Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *