CSS: Ширина и высота элемента
По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width
и height
.
CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:
Обратите внимание, что свойства width
и height
определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p.first { width: 150px; height: 100px; background-color: #B2FFCC; padding: 0px; /*обнуляем внутренние отступы*/ } p.second { width: 150px; height: 100px; background-color: #C2FFFF; border: 5px ridge #0066FF; padding: 10px; margin: 5px; } </style> </head> <body> <p class="first">Для данного абзаца зададим только ширину и высоту.</p> <p class="second">Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.</p> </body> </html>Попробовать »
В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:
Общая ширина: | 5px | + | 10px | + | 150px | + | 10px | + | 5px | = 180px |
левая рамка | левый отступ | ширина | правый отступ | правая рамка |
Общая высота: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
верхняя рамка | верхний отступ | высота | нижний отступ | нижняя рамка |
то есть 180x130 пикселей.
Переполнение элементов
После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow. Свойство overflow
сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:
- visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
- scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
- auto - добавляет полосы прокрутки при необходимости.
- hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> div { width:150px; height:200px; border: 1px solid black; overflow:auto; } </style> </head> <body> <div><img src="tree.png"></div> </body> </html>Попробовать »
С этой темой смотрят: