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

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

  • Свойство 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>

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



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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok