CSS трюк с набивкой не даст мне правильных пропорций - PullRequest
Новая
       0

CSS трюк с набивкой не даст мне правильных пропорций

0 голосов
/ 06 марта 2020

Говорят, что "заполнение в процентах основано на ширине родительского элемента" . Padding-top: 100% с width: 100% должно дать мне квадратную форму. Это не совсем мой случай, и я не понимаю, почему.

Допустим, у меня есть такая структура: 

<body>
  <div class="wrapper">
    <div class="page">
      <div class="group">
        <div class="section">
        </div>
      </div>
    </div>
  </div>
</body>

Я хочу сделать квадрат "сечения". Я также хочу сделать некоторые границы на странице. Поэтому я делаю это: 

 .wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .page {
    /* Making border this way */
    width: 95%;
  }
  .group {
    width: 100%;
  }
  .section {
    /* Making square */
    width: 100%;
    padding-top: 100%;
  }

Но оказывается, что мой "квадрат" немного выше, чем должен. Как на 5% выше. В моем понимании я говорю браузеру «возьми 100% w от« group », что равняется 100% w от« section », и сделай так» section »таким высоким». Очевидно, что это работает не так, как я ожидал.

Так что любая помощь, объясняющая, что не так с моей логикой c, или, что еще лучше, как сохранить относительные пропорции элементов на всех экранах без использования абсолютных чисел, будет оценена!

Ответы [ 3 ]

2 голосов
/ 06 марта 2020

Ну, это на самом деле не означает "Добавить эту высоту".

Заполнение в CSS - это свойство элемента, которое вы устанавливаете, чтобы добавить пространство между границей вашего элемента и всем, что в нем содержится.

Итак, если вам нужно пространство между вашим элементом и другим элементом, вы используете «margin», а если вы хотите создать пространство внутри элемента, вы используете padding. (или поле для дочерних элементов)

0 голосов
/ 06 марта 2020 
.section {
  /* Making square */
  width: 100%;
  padding-top: 100%;
  box-sizing: border-box;
}

Граница размера блока

По умолчанию в блочной модели CSS ширина и высота, назначаемые элементу, применяются только к блоку содержимого элемента , Если элемент имеет какие-либо рамки или отступы, он затем добавляется к ширине и высоте, чтобы получить размер поля, отображаемого на экране.

0 голосов
/ 06 марта 2020

Я узнал ответ. Я думал, что «верхний край» был чем-то вроде «заставь меня придать такую ​​высокую форму», но на самом деле это означает «добавь столько высоты к этой форме».

Форма содержала некоторую текстовую метку, поэтому к ее высоте был добавлен отступ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...