0

Всем привет, не могу понять почему border шире самого элемента

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: #2F3136;
  overflow-x: hidden;
}

.header1 {
  padding: 1px 0px 0px 4px;
  font-family: 'Century Gothic';
  color: #A6A7A8;
  height: 22px;
  margin: 0 auto;
  background: #202225;
  border: 2px solid #202225;
  width: 100%;
  position: absolute;
}

.content {
  border-radius: 8px;
  margin-top: 100px;
  margin-left: 400px;
  background: #202225;
  color: white;
  border: 2px solid #202225;
  width: 1300px;
  height: 800px;
  position: absolute;
}

.contentimage {
  margin-top: 120px;
  margin-left: 200px;
  width: 1000px;
  height: 600px;
  position: absolute;
}

.paspartu {
  margin: 0px;
  padding: 0px;
  border: 5px solid grey;
}

.leftside {
  color: white;
  background: #202225;
  border: 2px solid #202225;
  top: 0;
  bottom: 0;
  margin-top: 27px;
  width: 80px;
  position: absolute;
}

ul li {
  background: #090214;
  border-top: 7px solid #090214;
  border-left: 7px solid #090214;
  border-right: 7px solid #090214;
  width: 75%;
  margin-left: 3px;
  margin-top: 15px;
  border-radius: 18px;
  list-style-type: none;
  transition: 0.5s;
}

ul li:hover {
  background: #090214;
  border-top: 7px solid #090214;
  border-left: 7px solid #090214;
  border-right: 7px solid #090214;
  width: 75%;
  margin-left: 3px;
  margin-top: 15px;
  border-radius: 7px;
  list-style-type: none;
  transition: 0.5s;
}
<div class='header1'>Discord</div>

<div class='leftside'>
  <ul>
    <div class='rounded'>
      <li><img width=1 00% src='pro.jpg'></li>
      <li><img width=1 00% src='pro.jpg'></li>
      <li><img width=1 00% src='pro.jpg'></li>
      <li><img width=1 00% src='pro.jpg'></li>
      <li><img width=1 00% src='pro.jpg'></li>
    </div>
  </ul>
</div>

<div class='content'>
  <div class='contentimage'>
    <div class='paspartu'>
      <img width=50% src='text.jpg'>
    </div>
  </div>
</div>

введите сюда описание изображения

2
  • Просто div с классом paspartu в силу того, что является блочным элементом растягивается на всю предоставленную ему ширину, то есть на ширину родительского контейнера, равного 1000 пиксилей Commented 1 мар. 2019 в 22:45
  • Вам либо изображению рамку задать надо, либо поменять свойство display у элемента .paspartu Commented 1 мар. 2019 в 22:46

1 ответ 1

1

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
К блочным элементам относятся контейнеры <div>, <h1>, <p> и др.

Блочные элементы | htmlbook.ru


Если вы хотите сделать бордюр именно у изображение, то можете задать бордюр непосредственно к изображению:

img {
  border: 2px solid gray;
}

Дело в том, что если использовать img, бордер применится и к иконкам

Вы можете использовать следующее:

Определить конкретный класс для картинок с бордюром.

<img class="border" src="">

img.border {...}

Класс для иконок и "запретить" использовать свойство этому классу.

<img class="icon" src="">

img:not(.icon) {...}

Или, если все иконки имеют совпадение в адресе, допустим "уникальный путь", типо /img/icon/..., то можно сделать ещё и так.

img:not([src^="/img/icon/") {...}
2
  • Дело в том, что если использовать img, бордер применится и к иконкам Commented 2 мар. 2019 в 23:55
  • @ГенаПевко, дополнил
    – De.Minov
    Commented 3 мар. 2019 в 7:42

Ваш ответ

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

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