Вы видели границу, которая окружает каждый ящик, т.е. элемент, отступы, которые могут появляться внутри каждого поля, и поля, которые могут их обойти. В этом уроке мы узнаем, как мы можем изменить размеры ящиков.
У нас есть следующие свойства, которые позволяют вам контролировать размеры коробки.
-
Свойство height используется для установки высоты поля.
-
Свойство width используется для установки ширины поля.
-
Свойство line-height используется для установки высоты строки текста.
-
Свойство max-height используется для установки максимальной высоты, которой может быть коробка.
-
Свойство min-height используется для установки минимальной высоты, которой может быть коробка.
-
Свойство max-width используется для установки максимальной ширины рамки.
-
Свойство min-width используется для установки минимальной ширины, которой может быть коробка.
Свойство height используется для установки высоты поля.
Свойство width используется для установки ширины поля.
Свойство line-height используется для установки высоты строки текста.
Свойство max-height используется для установки максимальной высоты, которой может быть коробка.
Свойство min-height используется для установки минимальной высоты, которой может быть коробка.
Свойство max-width используется для установки максимальной ширины рамки.
Свойство min-width используется для установки минимальной ширины, которой может быть коробка.
Свойства высоты и ширины
Свойства высоты и ширины позволяют вам устанавливать высоту и ширину для ящиков. Они могут принимать значения длины, процента или ключевого слова auto.
Вот пример —
<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400pixels wide and 100 pixels high </p> </body> </html>
Это даст следующий результат —
Свойство line-height
Свойство line-height позволяет вам увеличить расстояние между строками текста. Значение свойства line-height может быть числом, длиной или процентом.
Вот пример —
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>
Это даст следующий результат —
Свойство max-height
Свойство max-height позволяет вам указать максимальную высоту блока. Значение свойства max-height может быть числом, длиной или процентом.
ПРИМЕЧАНИЕ. — Это свойство не работает ни в Netscape 7, ни в IE 6.
Вот пример —
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>
Это даст следующий результат —
Свойство минимальной высоты
Свойство min-height позволяет вам указать минимальную высоту блока. Значением свойства min-height может быть число, длина или процент.
ПРИМЕЧАНИЕ. — Это свойство не работает ни в Netscape 7, ни в IE 6.
Вот пример —
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>
Это даст следующий результат —
Свойство max-width
Свойство max-width позволяет вам указать максимальную ширину бокса. Значение свойства max-width может быть числом, длиной или процентом.
ПРИМЕЧАНИЕ. — Это свойство не работает ни в Netscape 7, ни в IE 6.
Вот пример —
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>
Это даст следующий результат —
Свойство минимальной ширины
Свойство min-width позволяет вам указать минимальную ширину поля. Значение свойства min-width может быть числом, длиной или процентом.
ПРИМЕЧАНИЕ. — Это свойство не работает ни в Netscape 7, ни в IE 6.
Вот пример —
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>
Это даст следующий результат —