Как избавиться от этих белых линий по краям?

Question

[Ruslan Website]

не пойму откуда они берутся.

Comments

[Сергей delphinpro]

Научитесь пользоваться

инспектором объектов в браузере

Answer 1

[Danny Arty]

Добавьте body свойство margin: 0;

body {
margin: 0;
font-size: 21%;
padding: 0px;
}

Comments

[Ruslan Website]

Все испробовал кроме этого)) спасибо

[Danny Arty]

Ruslan Website, пожалуйста)

Answer 2

[Григорий]

Нужно всегда использовать сброс стилей
Конкретно для данной ситуации

*{
  padding: 0;
  margin: 0;
}

А в целом reset.css

/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    font: 18px 'Golos', Helvetica, Roboto, Arial, sans-serif;
    line-height: normal;
}
* {
    scrollbar-width: thin;
}
*:hover, *:active{
    -webkit-tap-highlight-color: transparent
}
a {
    text-decoration: none;
    color: inherit;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    min-height: 100%;
    scrollbar-width: thin;
}

Comments

[Ankhena]

Привет, 2010.
https://qna.habr.com/q/1044708 комментарии к одному из ответов
Там же ссылки на более разумные подходы к сбросу.

[Ruslan Website]

Ну вообще то полный сброс мне иногда вредил, я как новичек долго не мог понять в чем проблема.

[Григорий]

Ankhena, и в чём же конкретно проблема?
По ссылке много написано, много сомнений и мнений

[Ankhena]

Григорий, проблема в том, что это просто много лишнего текста.
И эти нули вы потом всё равно переопределяете.

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

Эти не были блочными в 8ИЕ. (Или в 7м?) Т.е. в самом начале появления этих тегов в html5. Потом остался неблочным только main.
Если вашими клиентами являются пользователи ИЕ8, то могу вам только посочувствовать и да, вам нужно писать эту муть, а также отказаться от флексов и других приятностей.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video

У каких из этих тегов в современных браузерах есть margin и padding? Узнайте это. И если они там действительно не нужны, тогда обнуляйте. Но очень часто, по макету они все таки нужны. И именно макетные значения и имеет смыл задавать. А не говорить браузеру, сначала сделай 0, а потом "ах, нет, я передумал, сделай 23".

font-size: 100%;

Да? Реально всем тегам на сайте нужен одинаковый шрифт? Ну, привет дизайнеру.

font: 18px 'Golos', Helvetica, Roboto, Arial, sans-serif;

Так 18px или 100%? Привет дизайнеру не отменяется.

box-sizing: border-box;

Да, хорошее свойство. Только зачем писать каждому по отдельности, если есть селекторы *, *::before, *::after

И т.д.

В целом, reset.css устарел и заменился normalize.css
Но сейчас и в нём многое устарело и просто тратит байтики пользователя и ресурсы браузера на переопределение. Пусть это крупицы, но тем не менее.

=> В своем коде имеет смысл писать только те свойства, которые действительно нужны по макету. А не просто все подряд, просто потому что кто-то 10 лет назад использовал reset.

Посмотрите внимательно на normalize и возьмите оттуда только полезное для конкретного проекта.

[Григорий]

Ankhena, хороший ответ
Спасибо)