0

Я делал практически все по туториалу и тут бац:/ Я хочу убрать верхние и боковые зазоры. Как это сделать? Если что load static это django python и в теге я использую иконочный шрифт.Вот и то что у меня на экране.

@font-face {
  font-family: 'iconfoont';
  src:  url('fonts/iconfoont.eot?lobagz');
  src:  url('fonts/iconfoont.eot?lobagz#iefix') format('embedded-opentype'),
    url('fonts/iconfoont.ttf?lobagz') format('truetype'),
    url('fonts/iconfoont.woff?lobagz') format('woff'),
    url('fonts/iconfoont.svg?lobagz#iconfoont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfoont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e90a";
}
.icon-friendss:before {
  content: "\e900";
}
.icon-chats:before {
  content: "\e901";
}
.icon-friends:before {
  content: "\e902";
}
.icon-chatss:before {
  content: "\e903";
}
.icon-heart:before {
  content: "\e904";
}
.icon-comment:before {
  content: "\e905";
}
.icon-plane:before {
  content: "\e906";
}
.icon-settings:before {
  content: "\e907";
}
.icon-palette:before {
  content: "\e908";
}
.icon-off:before {
  content: "\e909";
}

body {
  background: #1921FF;
}

li {
  list-style-type: none;
  display: inline;
}

#top1 {
  float: top;
  background: #2B2B2B;
  weight: 100vh;
  padding: 2,5%;
  height: 12%;
  color: #fff;
  border-bottom: 3px solid #555555;
}

#searchline {
  radius: 15%;
}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Моя сот сеть</title>
    <link rel="stylesheet" href="{% static 'myapp/style.css' %}">
</head>
<body>
  <aside id="top1">
      <form id="search">
          <p><input id="searchline" type="search" name="q" placeholder="Поиск по сайту">
          <input type="submit" value="Найти"></p>
      </form>
      <ul id="local">
          <a><li><i class="icon-heart"></i></li></a>
          <a><li><i class="icon-comment"></i></li></a>
          <a><li><i class="icon-plane"></i></li></a>
      </ul>
  </aside>
  <aside id="top2">
      <button>все</button>
      <button>чаты</button>
      <button>посты</button>
      <button>видео</button>
      <button>изображения</button>
      <button>аудио</button>
      <button>реклама</button>
  </aside>
  <main>

  </main>
</body>
</html>

4
  • 3
    Во-первых, у свойства float не существует значения top. Во-вторых, вам нужно всего лишь обнулить margin для элемента body
    – andreymal
    Commented 2 сент. 2021 в 12:38
  • @andreymal или обнулить margin также для aside Commented 2 сент. 2021 в 13:04
  • 1
    @highpassion неа, в aside и так нулевой margin
    – andreymal
    Commented 2 сент. 2021 в 13:08
  • Ненулевые маргины у тегов body и p.
    – Quazimorda
    Commented 2 сент. 2021 в 14:49

1 ответ 1

0

Возьмите за привычку всегда сразу задавать нулевые отступы для всей страницы:

* {
  margin: 0;
  padding: 0;
}

Если добавить эти свойства в CSS, то все будет выглядеть, как надо

5
  • Есть мнение, что так можно сломать отступы по-умолчанию везде, е следовало бы отключить маргины у тегов body и p.
    – Quazimorda
    Commented 2 сент. 2021 в 14:51
  • Спасибо огромное, мучался 2 часа. Очень помогли. Простите за наглость, но можно мне вам еще написать вопросы если появятся?
    – Diyabya
    Commented 2 сент. 2021 в 18:11
  • @Diyabya StackOverflow так и устроен. Есть вопросы - приходите, задаёте. ))
    – Quazimorda
    Commented 3 сент. 2021 в 12:36
  • Тогда ок. Но все же хотелось бы)..
    – Diyabya
    Commented 3 сент. 2021 в 15:05
  • Конечно, задавайте
    – Listopad02
    Commented 5 сент. 2021 в 17:19

Ваш ответ

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

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