Как выровнять вертикальные рамки?

Question

[Sector567]

Здравствуйте. Подскажите, почему вертикальные рамки (border-right) не образуют единую вертикальную линию?
Где я ошибся?

https://jsfiddle.net/6fLveyms/

Comments

[Сергей delphinpro]

https://jsfiddle.net/8qsbv4yg/

К прочтению обязательно: https://css-live.ru/articles/obzor-inlajnovyj-kont...

[Sector567]

Сергей delphinpro, спасибо за ответ. Обязательно изучу

Answer 1

[Alfieros]

.userImg{
display:flex; // Позволяет наследовать значения высоты и ширины вложенных элементов.
height: 150px; //  Ограничить сам блок по высоте. Можно и оба свойства оставить.
}
userImg img{
vertical-align: top; // или так, если отбросить варианты выше.
}
.userProfile__aside ul li{
display: flex;
border-bottom: 1px solid red;
align-items: center; // а дальше установите позиционирование как вам нужно.
}

Comments

[Sector567]

Почти сработало, единственно в самом верху отступ почему-то по прежнему остался

[Alfieros]

Добавьте для

.userImg{
display:flex;
}

[Sector567]

Работает, спасибо.
Скажите, а это хорошее решение считается? Вы бы также сверстали? Я просто новичок в этом, не
совсем разбираюсь правильная это верстка или есть более изящное решение?

[Sector567]

Alfieros, и главное почему под большой картинкой образовывается этот промежуток?

[Alfieros]

Sector567, это из-за того, что у блока с картинкой нет свойства высоты.
Свойство display: flex - решают данную задачу тем, что подстраивается под размер самой картинки и тем самым получает значение высоты и ширины вложенного элемента.
Можно было бы просто прописать для блока с картинкой значение высоты height: 150px; и так же решить данную задачу.

[Sector567]

Alfieros, спасибо за помощь

[Alfieros]

Sector567,

Скажите, а это хорошее решение считается? Вы бы также сверстали? Я просто новичок в этом, не
совсем разбираюсь правильная это верстка или есть более изящное решение?

Решение верное, если она выполнило поставленную задачу.
Вопрос заключается в другом. Вам нужно понять, что находится в этом блоке, будет ли меняться внутри контент и какие свойства нужны данному элементу для поставленной задачи.
Первый пример. У нас есть блок с фотографией в соц. сети. Мы понимаем, что нам нужно ограничить размер высоты и ширины блока так, что бы всё оставалось на своих местах и фотография профиля была у всех одинаковой.
Тогда мы задаем фиксированное значение высоты и ширины блока.
Второй пример. У нас есть блок для сообщений, где высота блока должна принимать значение высоты содержимого, тогда нам нельзя задавать чёткие границы высоты, здесь мы и применяем свойство display: flex;
чтобы родитель наследовал значение высоты дочернего элемента.

[Сергей delphinpro]

это из-за того, что у блока с картинкой нет свойства высоты.

неверное утверждение
Этот отступ образовывается у строчных и строчно-блочных элементов из-за особенностей выравнивания по базовой линии (дефолтное значение vertical-align). И неважно задаете вы ему высоту или нет. Лечится свойством vertical-align: top;.

[Alfieros]

Сергей delphinpro, имеет место быть. Спасибо что поправили. Я в начале и не вспомнил, сейчас дополню ответ.

[Sector567]

Сергей delphinpro, большое спасибо за объяснение