Высота и ширина в CSS
Высота и ширина элемента задаются CSS-свойствами height и width.
Пример
Здесь элемент имеет высоту 70 пикселей и ширину 100%.
Prompt
HTML-страница, показывающая элемент с заданной высотой и шириной в процентах.
Во внутреннем блоке
<style> задайте <div> высоту 70px, ширину 100% и цвет фона, чтобы его размер был виден. Поместите текст внутри.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 70px;
width: 100%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 70 pixels and a width of 100%.</div>
</body>
</html>
Установка высоты и ширины в CSS
Когда вы задаёте размер элемента с помощью height и width, внутренние отступы, границы и внешние отступы не учитываются. Эти свойства измеряют область внутри внутренних отступов, границы и внешних отступов.
Значения свойств height и width в CSS
height и width принимают пять видов значений:
auto— браузер сам вычисляет размер; это значение по умолчанию.- длина — размер в
px,cm,emи так далее. - процент — размер относительно содержащего блока.
initial— возвращает размер к значению по умолчанию.inherit— копирует размер от родительского элемента.
Примеры height и width в CSS
Примечание: внутренние отступы, границы и внешние отступы остаются за пределами размера, заданного height и width, поскольку эти свойства охватывают только область внутри них.
Высота 200px, ширина 50%
При высоте 200px этот div занимает половину ширины своего контейнера.
Prompt
HTML-страница, которая задаёт фиксированную высоту и ширину в процентах для элемента.
Во внутреннем блоке
<style> задайте <div> высоту 200px, ширину 50% и фон powderblue. Поместите текст внутри.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 200 pixels and a width of 50%.</div>
</body>
</html>
Высота 100px, ширина 500px
На этот раз фиксированный размер: высота 100px и ширина 500px.
Prompt
HTML-страница, которая задаёт фиксированную высоту и фиксированную ширину в пикселях для элемента.
Во внутреннем блоке
<style> задайте <div> высоту 100px, ширину 500px и фон powderblue. Поместите текст внутри.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 100 pixels and a width of 500 pixels.</div>
</body>
</html>