Как убрать отступы по краям элемента с position: relative, который растянут на всю ширину и высоту экрана?

Question

[istasiik]

P.S Внизу тоже есть отступ, если прокрутить.

Answer 1

[Александр Таратин]

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

Comments

[Максим Дунаевский]

Думаю, надо человеку рассказать про CSS-Reset

[Евгений Петров]

Вот это вообще зачем?

html {
	margin:0;
	padding:0;
}

[Евгений Петров]

А это?

body {
	padding:0;
}

[Александр Таратин]

@Petroveg у меня в профиле написано, что я говнокодер - это должно все объяснить.

Answer 2

[KorsaR-ZN]

Блин, вы код покажите, толку нам от картинки. Мы ж не бабки прорицательницы...

Answer 3

[Радость моя]

margin:0;
padding:0;

Answer 4

[istasiik]

Вот HTML:

<div class="item">
   <img alt="" src="img/patta.png"> 
    <div class="bigshadow"><img alt="" src="img/bigshadow.png"></div>
    <div class="about">
    <div class="name">Свитшот Patta</div>
    <div class="review">Серый свитшот из чистого хлопка для мужчин готовых идти на риски.</div>
    <div class="button">Купить</div>
    <div class="price"></div>
    </div>
</div>

CSS:

.item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.item img {
    min-height: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

Comments

[Ден Тоцкий]

Попробуйте: body { margin: 0; }

[istasiik]

@xDen сработало, спасибо! А возможно убрать этот отступ только на одной странице, а не по всему css?

[Ден Тоцкий]

как вариант, сбросить дефолтный отступы padding и margin на тег body, обернуть div`ом ту часть html которая должна быть с отступами. делаем 2 класса, прописываем им разные отступы. на нужной странице меняем эти классы для обертки. можно конечно и на body вешать разные классы, но это плохая практика

[istasiik]

@xDen Понял, спасибо большое!

Answer 5

[Trow_eu]

не совсем понятно тогда. попробуйте еще box-sizing: border-box;

Comments

[istasiik]

Спасибо, не помогло, к сожалению

Answer 6

[Ден Тоцкий]

Если хотите чтобы вам помогли, напишите пример кода с проблемой

Comments

[Ден Тоцкий]

я так подозреваю, что можно попробовать, сделать сброс стилей css

[Евгений Петров]

@xDen попробовать что? Сбросить — это как? Говнокодим понемногу?

[Ден Тоцкий]

@Petroveg Сброс стандартных отступов html элементов например Normalize.css

[Евгений Петров]

@xDen я про это и говорю. Вы можете перечислить дефолтные отступы в элементах и самое главное — зачем их сбрасывать?

[Ден Тоцкий]

@Petroveg про что Вы говорите, Вас не поймешь, как и вопрос, вокруг да около. относительно вопроса "Как убрать отступы по краям элемента" можно применить весь файл сброса стилей к документу и проверить, возможно это поможет, в чем конкретно косяк, хз, так что, конкретизировать не вижу смысла

[Евгений Петров]

@xDen хорошо. Покажите свой файл сброса, раз вы не понимаете, о чё я говорю.

[Ден Тоцкий]

нужен пример проблемы

[Евгений Петров]

@xDen просто покажите свой Normalize.css

[Евгений Петров]

@xDen или он у вас разный, что вообще странно?

[Ден Тоцкий]

@Petroveg я привел пример Normalize.css necolas.github.io/normalize.css/3.0.1/normalize.css

[Евгений Петров]

@xDen предположим, проблема №7

[Евгений Петров]

@xDen

a:active,
a:hover {
  outline: 0;
}

Говнище редкостное. Руки отрубать.

b,
strong {
  font-weight: bold;
}

Что??? Для этих элементов bolder. Если не понимаете разницы, читайте спецификации.

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

Очередной кусок говнокода. Особенно смешно про vertical-align и line-height.

sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

Ах вот почему... Нам хочется двигать инлайновые элементы незаметно.

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

Моноширинные шрифты не во всех элементах по умолчанию (а они точно должны быть такими в kbd?). Но 1em — это для кого?

button,
select {
  text-transform: none;
}

А?

input {
  line-height: normal;
}

Это кому-то помогает?

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

А это?

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

Послушайте, каждый браузер определяет для себя стили для системных элементов. Зачем нужно выправлять то, что выправлять не нужно?

legend {
  border: 0;
  padding: 0;
}

Без комментариев.

optgroup {
  font-weight: bold;
}

Где-то уже было про bolder.

td,
th {
  padding: 0;
}

Дануна.

Треть стилей — мусор. Треть — весьма спорна. И только оставшаяся треть может быть включена. Типа

table {
  border-collapse: collapse;
  border-spacing: 0;
}
textarea {
  overflow: auto;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
img {
  border: 0;
}

[istasiik]

@xDen я привел код чуть выше. Взгляните, пожалуйста