Размеры в CSS

Вы видели границу, которая окружает каждый элемент, отступы, которые могут появляться внутри каждого окна, и поля, которая может обойти их. В этой статье вы узнаете, как мы можем изменить размеры элементов.

У нас есть следующие свойства, которые позволяют вам контролировать размеры окна.

• Свойство height используется для установки высоты окна.
• Свойство width используется для установки ширины окна.
• Свойство line-height используется, чтобы установить высоту строки текста.
• Свойство max-height используется для установки максимальной высоты, которая может быть полем.
• Свойство min-height используется для установки минимальной высоты, которая может быть полем.
• Свойство max-width используется для установки максимальной ширины, которая может быть полем.
• Свойство min-width используется для установки минимальной ширины, которая может быть полем.

Свойства height и width

Свойства height и 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="95" height="84" />
   < /body>
< /html>

Это приведет к следующему результату -

Свойство min-height

Свойство 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
      < /p>
      < img alt="logo" src="/css/images/logo.png" width="95" height="84" />
   < /body>
< /html>

Это приведет к следующему результату -

Свойство min-width

Свойство 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
      < img alt="logo" src="/css/images/css.gif" width="95" height="84" />
   < /body>
< /html>

Это приведет к следующему результату -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!