Появляется пробел между двумя блоками CSS, как исправить?

Рейтинг: 1Ответов: 3Опубликовано: 06.05.2023

Вот мой код, не знаю почему так происходит, но не могу решить.

* {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    cursor: url("img/imgonline-com-ua-Resize-gIabN90QbI7V.png"), default;
}

#header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.Astral {
    font-family: 'Press Start 2P';
    font-size: 50px;
    color: #FF74F5;
    padding-top: 20px;
    padding-left: 30px;
    height: 70px;
    background: #2F2F2F;
    transition: 0.5s all;
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
    margin-right: -15px;
}

    .Astral:hover {
        color: #fff;
        background: linear-gradient( 90deg, rgba(173, 32, 217, 1) 0%, rgba(247, 25, 218, 1) 43%, rgba(255, 128, 206, 1) 78%, rgba(255, 224, 242, 1) 100% );
        transition: 0.5s all;
    }

.News {
    font-family: 'Press Start 2P';
    font-size: 50px;
    color: white;
    padding: 20px;
    transition: 0.5s all;
    background: black;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    margin-left: -15px;
}

    .News:hover {
        color: #fff;
        background: green;
        transition: 0.5s all;
    }
<body>
    <div id="header">
        <div class="Astral" id="a1">Astral</div>
        <div class="News" id="a2">Новости</div>
    </div>
    <div id="head">
        <div class="info">О сервере</div>
        <div class="info">Сборки</div>
        <div class="info">Донат</div>
        <div class="info">Гайды</div>
        <div class="info">Правила</div>
        <div class="info">Ресурс-пак</div>
    </div>
    <div id="main">
        <div>
            Новости
        </div>
    </div>
    <div id="footer">
        <div></div>
    </div>
</body>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Как вариант добавить абсолютное позиционирование и ширину блокам

* {
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', cursive;
  cursor: url("img/imgonline-com-ua-Resize-gIabN90QbI7V.png"), default;
}

#header {
  display: flex;
  justify-content: center;
}

.Astral {
  position: absolute;
  font-family: 'Press Start 2P';
  font-size: 50px;
  color: #FF74F5;
  background: #2F2F2F;
  transition: 0.5s all;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
  margin-right: -15px;
  width: 55vw;
  left: 0;
  text-align: center;
}

  .Astral:hover {
      color: #fff;
      background: linear-gradient( 90deg, rgba(173, 32, 217, 1) 0%, rgba(247, 25, 218, 1) 43%, rgba(255, 128, 206, 1) 78%, rgba(255, 224, 242, 1) 100% );
      transition: 0.5s all;
  }

.News {
  position: absolute;
  font-family: 'Press Start 2P';
  font-size: 50px;
  color: white;
  transition: 0.5s all;
  background: black;
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 55vw;
  right: 0;
  text-align: center;
}

  .News:hover {
      color: #fff;
      background: green;
      transition: 0.5s all;
  }
<body>
  <div id="header">
      <div class="Astral" id="a1">Astral</div>
      <div class="News" id="a2">Новости</div>
  </div>
  <div id="head">
      <div class="info">О сервере</div>
      <div class="info">Сборки</div>
      <div class="info">Донат</div>
      <div class="info">Гайды</div>
      <div class="info">Правила</div>
      <div class="info">Ресурс-пак</div>
  </div>
  <div id="main">
      <div>
          Новости
      </div>
  </div>
  <div id="footer">
      <div></div>
  </div>
</body>

▲ 0

Ваша проблема заключается в этом

 #header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

тут вы создаете 2 колонки и между ними ставится пробел. Попробуйте использовать display: flex;

▲ 0

Так же в качестве костыля можете попробовать использовать большие margin-left и margin-right, чтобы сделать "наезжание" блоков друг на друга

* {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    cursor: url("img/imgonline-com-ua-Resize-gIabN90QbI7V.png"), default;
}

#header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.Astral {
    font-family: 'Press Start 2P';
    font-size: 50px;
    color: #FF74F5;
    height: 70px;
    background: #2F2F2F;
    transition: 0.5s all;
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
    padding-left: 50px;
    margin-right: -80px;
}

.Astral:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(173, 32, 217, 1) 0%, rgba(247, 25, 218, 1) 43%, rgba(255, 128, 206, 1) 78%, rgba(255, 224, 242, 1) 100%);
    transition: 0.5s all;
}

.News {
    font-family: 'Press Start 2P';
    font-size: 50px;
    color: white;
    height: 70px;
    transition: 0.5s all;
    background: black;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    padding-left: 100px;
    margin-left: -80px;
}

.News:hover {
    color: #fff;
    background: green;
    transition: 0.5s all;
}
<div id="header">
    <div class="Astral" id="a1">Astral</div>
    <div class="News" id="a2">Новости</div>
</div>
<div id="head">
    <div class="info">О сервере</div>
    <div class="info">Сборки</div>
    <div class="info">Донат</div>
    <div class="info">Гайды</div>
    <div class="info">Правила</div>
    <div class="info">Ресурс-пак</div>
</div>
<div id="main">
    <div>
        Новости
    </div>
</div>
<div id="footer">
    <div></div>
</div>