0

Есть следующий код:

HTML:

    <!-- Main -->
    <main class="main">
        <div class="container main__contentainer">
            <h1 class="main__header">TEXT</h1>
            <p class="main__description">text</p>
            <button class="main__button">text</button>
        </div>
    </main>

CSS:

body {
    font-family: 'Cuprum', sans-serif;
    margin: 0; 
    padding: 0;
}

.container {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Main */
.main {
    background: url("../images/fone.png") no-repeat center top;
}

Пытаюсь растянуть фоновое изображение в блоке Main, но сверху есть отступ которые ни как не получается убрать. HTML CSS занимаюсь не давно, подскажите в чем проблема, заранее спасибо.

3
  • Какие именно отступы имеете в виду? Можете привести картинку? По коду кажется, что вы не убрали стандартные отступы браузера у body и h1.
    – novvember
    11 июл 2022 в 12:41
  • Немного подправил код. Теперь изображение растянуто по горизонтали, но по вертикали все так же есть отступ
    – Salivan
    15 июл 2022 в 12:59
  • Проверьте, иногда дизайнер отдает необрезанный png в котором этот отступ уже залит. Просто вы его не видите. 15 июл 2022 в 13:11

2 ответа 2

0

Попробуйте в свойствах прописать этот код.

*{
  margin: 0;
  padding: 0;
}

Возможно,дело не в самой картинке,а что-то ей даёт отступ. Код убирает все дефолтные отступы у контента,которые устанавливаются браузерами по умолчанию.

1
  • Сделал как посоветовали, не помогло. bacground-image заменил на просто background, теперь изображение растянуто по горизонтали, но по вертикали все так же присутствует отступ
    – Salivan
    15 июл 2022 в 13:01
0
*{
  margin: 0;
  padding: 0;
}

Убирает все лишние отступы. Ниже приведены примеры фоновой картинки, ещё примеры можно посмотреть тут.

*{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cuprum', sans-serif;
  margin: 0; 
  padding: 0;
}

.container {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Main */
.main1 {
  background: center / cover no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}

.main2 {
  background: no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}

.main3 {
  background: center / contain no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}
Hello world
  <script src="script.js"></script>
  <main class="main1">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 1</h1>
      <p class="main__description">text 1</p>
      <button class="main__button">text 1</button>
    </div>
  </main>

  <main class="main2">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 2</h1>
      <p class="main__description">text 2</p>
      <button class="main__button">text 2</button>
    </div>
  </main>

  <main class="main3">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 3</h1>
      <p class="main__description">text 3</p>
      <button class="main__button">text 3</button>
    </div>
  </main>

Помните, что вы задаете фон блоку main, а не для всей странице. Если вы по прежнему видите непонятные отступы, вы можете посмотреть в инструментах разработчика (Dev Tools), к какому элементу относится отступ.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.