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 пиксилей 1 мар 2019 в 22:45
  • Вам либо изображению рамку задать надо, либо поменять свойство display у элемента .paspartu 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, бордер применится и к иконкам 2 мар 2019 в 23:55
  • @ГенаПевко, дополнил
    – De.Minov
    3 мар 2019 в 7:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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