@dominy

Как использовать padding при scrol и center-выравнивании?

Здравствуйте. При использовании такого кода
<p class="text">  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque eaque provident natus exercitationem consequatur quo ab, ratione, accusantium voluptatum omnis veritatis nostrum. Quae iste mollitia quod magni necessitatibus ex placeat consequuntur reiciendis? Laborum eos molestias quibusdam consectetur provident ullam porro expedita pariatur ea enim autem minima aspernatur, praesentium tempora inventore atque eaque aliquam rerum et corporis. Incidunt, repellat! Fuga, in?</p>
<style>
.text{
	font-size: 2vmin;
	
	background: green;
    height: 20vmin;
	width: 20vmin;
	
	box-sizing: border-box;
	padding: 1vmin;
	
	overflow-x: hidden;
    overflow-y: auto;
	
	display: flex;
    justify-content: center;
    align-items: center;
}
</style>

паддинги сверху игнорируются, хотя снизу в порядке, как я могу это исправить
60eb419151469555587152.png
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
padding не исчезает, у вас просто вертикальное выравнивание центрирует текст. Вот так проще понять https://jsfiddle.net/Vlad_IT/rm6uz1hx/ я убрал overflow: hidden/scroll и добавил margin. С вертикальным выравниваем симметричный padding ничего не дает. Уберите align-items и все будет ок https://jsfiddle.net/Vlad_IT/rm6uz1hx/2/

suizsslbr1d4nzx3ugmpxjmk9ic.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы