Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 8:

Поля в CSS

< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Аннотация: Приводятся способы определения пространства между границей элемента и его содержимым.

Данные параметры определяют пространство между границей элемента и содержимым элемента.

Примеры

  1. Этот пример показывает, как задать левое поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-left: 0.5cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  2. Этот пример показывает, как задать правое поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-right: 3cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  3. Этот пример показывает, как задать верхнее поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-top: 1cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  4. Этот пример показывает, как задать нижнее поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-bottom: 2.5cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  5. Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений.
    <html>
    <head>
    <style type="text/css">
    li.first {padding: 2.5cm}
    li.second {padding: 1cm 2cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li class="first">элемент списка с одинаковыми полями со всех сторон</li>
    <li>элемент списка</li>
    <li class="second">элемент списка, который имеет верхнее и нижнее поле, равное 1 см, 
    а левое и правое поля — равные 2 см</li>
    </ol>
    </body>
    
    </html>

Параметры полей в CSS

Определяют пространство между границей элемента и содержимым элемента, для которого не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно изменять независимо друг от друга. Существует также параметр padding, который позволяет определять нескольких полей в одном объявлении.

Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
padding Параметр для задания всех полей в одном объявлении padding-top 4 1 4 1
padding-right
padding-bottom
padding-left
padding-bottom Задает нижнее поле элемента length 4 1 4 1
%
padding-left Задает левое поле элемента length 4 1 4 1
%
padding-right Задает правое поле элемента length 4 1 4 1
%
padding-top Задает верхнее поле элемента length 4 1 4 1
%
< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8684103097656watchdog( )../bootstrap.inc:0
24.8690103100112module_invoke( )../bootstrap.inc:967
34.8691103101968call_user_func_array ( )../module.inc:462
44.8691103102304devel_watchdog( )../module.inc:462
54.8693103103152decode_entities( )../devel.module:382
64.8694103105072drupal_error_handler( )../devel.module:340
74.8694103108680watchdog( )../common.inc:663
84.8695103110736module_invoke( )../bootstrap.inc:967
94.8695103112592call_user_func_array ( )../module.inc:462
104.8695103112928devel_watchdog( )../module.inc:462
114.8696103113624decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8684103097656watchdog( )../bootstrap.inc:0
24.8690103100112module_invoke( )../bootstrap.inc:967
34.8691103101968call_user_func_array ( )../module.inc:462
44.8691103102304devel_watchdog( )../module.inc:462
54.8693103103152decode_entities( )../devel.module:382
64.8694103105072drupal_error_handler( )../devel.module:340
74.8694103108680watchdog( )../common.inc:663
84.8695103110736module_invoke( )../bootstrap.inc:967
94.8695103112592call_user_func_array ( )../module.inc:462
104.8695103112928devel_watchdog( )../module.inc:462
114.8696103113624decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8684103097656watchdog( )../bootstrap.inc:0
24.8690103100112module_invoke( )../bootstrap.inc:967
34.8691103101968call_user_func_array ( )../module.inc:462
44.8691103102304devel_watchdog( )../module.inc:462
54.8693103103152decode_entities( )../devel.module:382
64.8709103105264drupal_error_handler( )../devel.module:340
74.8709103108952watchdog( )../common.inc:663
84.8709103111008module_invoke( )../bootstrap.inc:967
94.8710103112864call_user_func_array ( )../module.inc:462
104.8710103113200devel_watchdog( )../module.inc:462
114.8711103113976decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8684103097656watchdog( )../bootstrap.inc:0
24.8690103100112module_invoke( )../bootstrap.inc:967
34.8691103101968call_user_func_array ( )../module.inc:462
44.8691103102304devel_watchdog( )../module.inc:462
54.8693103103152decode_entities( )../devel.module:382
64.8709103105264drupal_error_handler( )../devel.module:340
74.8709103108952watchdog( )../common.inc:663
84.8709103111008module_invoke( )../bootstrap.inc:967
94.8710103112864call_user_func_array ( )../module.inc:462
104.8710103113200devel_watchdog( )../module.inc:462
114.8711103113976decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8724103098200watchdog( )../bootstrap.inc:0
24.8725103100256module_invoke( )../bootstrap.inc:967
34.8725103102112call_user_func_array ( )../module.inc:462
44.8725103102448devel_watchdog( )../module.inc:462
54.8726103103152decode_entities( )../devel.module:382
64.8726103105072drupal_error_handler( )../devel.module:340
74.8727103108680watchdog( )../common.inc:663
84.8727103110736module_invoke( )../bootstrap.inc:967
94.8727103112592call_user_func_array ( )../module.inc:462
104.8727103112928devel_watchdog( )../module.inc:462
114.8728103113624decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8724103098200watchdog( )../bootstrap.inc:0
24.8725103100256module_invoke( )../bootstrap.inc:967
34.8725103102112call_user_func_array ( )../module.inc:462
44.8725103102448devel_watchdog( )../module.inc:462
54.8726103103152decode_entities( )../devel.module:382
64.8726103105072drupal_error_handler( )../devel.module:340
74.8727103108680watchdog( )../common.inc:663
84.8727103110736module_invoke( )../bootstrap.inc:967
94.8727103112592call_user_func_array ( )../module.inc:462
104.8727103112928devel_watchdog( )../module.inc:462
114.8728103113624decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8724103098200watchdog( )../bootstrap.inc:0
24.8725103100256module_invoke( )../bootstrap.inc:967
34.8725103102112call_user_func_array ( )../module.inc:462
44.8725103102448devel_watchdog( )../module.inc:462
54.8726103103152decode_entities( )../devel.module:382
64.8738103105264drupal_error_handler( )../devel.module:340
74.8739103108952watchdog( )../common.inc:663
84.8739103111008module_invoke( )../bootstrap.inc:967
94.8739103112864call_user_func_array ( )../module.inc:462
104.8739103113200devel_watchdog( )../module.inc:462
114.8740103113976decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.8724103098200watchdog( )../bootstrap.inc:0
24.8725103100256module_invoke( )../bootstrap.inc:967
34.8725103102112call_user_func_array ( )../module.inc:462
44.8725103102448devel_watchdog( )../module.inc:462
54.8726103103152decode_entities( )../devel.module:382
64.8738103105264drupal_error_handler( )../devel.module:340
74.8739103108952watchdog( )../common.inc:663
84.8739103111008module_invoke( )../bootstrap.inc:967
94.8739103112864call_user_func_array ( )../module.inc:462
104.8739103113200devel_watchdog( )../module.inc:462
114.8740103113976decode_entities( )../devel.module:382