Как работает padding-top: 100% работает?

У меня есть следующий код:Как работает padding-top: 100% работает?

.parent { 
 
     width: 30%; 
 
     border: 1px dotted red; 
 
    } 
 

 
    .child { 
 
     padding-top: 100%; 
 
     border: 1px solid black; 
 
    }

<div class="parent"> 
 
     <div class="child"></div> 
 
    </div>

И по какой-то причине ребенок становится квадратом. Это, по крайней мере, странно, потому что ни один из divs не имеет высоты, назначенной им. Почему это происходит?

Что делает padding-top: 100%?

Fiddle

источник

2016-10-18 iuliu.net

padding-bottom: 100% означает «сделать дно подкладки столь же высоким, как ширина элемента», таким образом, это квадрат, более подробная информация здесь: https://www.w3.org/TR/CSS2/box.html # padding-properties –

Процент вычисляется по * ширине * родительского контейнера. Это обычно используемый трюк, чтобы получить пропорционально масштабированные миниатюры ширины * и *. – meagar

Спасибо за разъяснение @meagar. Это не имеет большого значения для меня, но, похоже, это просто то, что происходит. –

Ваш ребенок DIV заполняется родителем шириной 100%. Свойство padding-top в процентах определяется шириной div. Таким образом, ваш ребенок получает 100% -ную ширину родительского (30%), а верхняя часть 100% - 100% -ная ширина этого элемента. То же самое относится к margin-top, который вычисляется по ширине.

источник

2016-10-18 11:41:54

Как работает padding-top: 100% работает?

ответ

Смежные вопросы