Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 13 из 53 · 11 мин
Каждый элемент — коробка: содержимое, padding, border, margin, ширина и высота.
Карточка: внутри отступ 16px, рамка 1px, между карточками 24px.
Для меня каждый элемент — прямоугольник из четырёх слоёв. Скажи размеры слоёв — нарисую точно.
widthbox-sizing: border-box).<style>
.card { width: 200px; background: #fdf6ec; }
</style>
<div class="card">200px</div>height<style>
.banner { height: 60px; background: #6b3e26; color: white; }
</style>
<div class="banner">60px</div>min-width<style>
button { min-width: 140px; }
</style>
<button>OK</button>max-width<style>
.text { max-width: 220px; background: #fdf6ec; }
</style>
<p class="text">Текст не шире 220px, даже на большом экране.</p>min-height<style>
.hero { min-height: 80px; background: #fdf6ec; }
</style>
<div class="hero">Минимум 80px</div>max-height<style>
.log { max-height: 50px; overflow: auto; background: #fdf6ec; }
</style>
<div class="log">1<br>2<br>3<br>4<br>5</div>padding16px, 8px 16px.<style>
.card { padding: 16px; background: #fdf6ec; }
</style>
<div class="card">Отступ внутри</div>marginauto по бокам центрирует блок.<style>
.box { width: 150px; margin: 12px auto; background: #fdf6ec; }
</style>
<div class="box">По центру</div>borderborder: 1px solid #c8763a — толщина, стиль, цвет.<style>
.card { border: 1px solid #c8763a; padding: 8px; }
</style>
<div class="card">С рамкой</div>Порядок 4 значений — по часовой стрелке: верх, право, низ, лево. margin: 0 auto центрирует блок.
Задай .card ширину 240px, внутренний отступ 16px, рамку 1px solid #c8763a и внешний отступ 24px.
Выберите один ответ.
Какой слой коробки находится между рамкой и содержимым?
Выберите один ответ.
Как отцентровать блок фиксированной ширины по горизонтали?
Проверяем состояние обучения…