Свойство margin-top, margin-right, margin-bottom, margin-left

ЛАБОРАТОРНАЯ РОБОТА № 12

Блоки в CSS

Теоретические сведения

В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-Р6, Р, DIV. они отделяются от других абзацными отступами.

Строчные элементы не создают визуальной самостоятельной структурной единицы и выводятся линейной строкой. Примеры: элементы I, B, U, S, ЕМ и др.

Блоки.

Два блочных элемента не могут располагаться в одной строке, а два строчных, соответственно, могут.

Модель представления документов в CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента р содержимым блока является текст абзаца.

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

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

Также блок может иметь отступы (margin), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. На рисунке приведена обобщенная структура блока в CSS.

Рис. 1. Структура блока в CSS

 

Все поля, границы и отступы делятся соответственно на верхние, нижние, правые! и левые. Для каждого из них можно задать значения независимо от других. Фон для различных областей блока задается следующим образом:

1. Область содержимого: фон задается свойством background элемента, порождающего данный блок.

2. Поля: фон задается свойством background элемента, порождающего данный блок.

3. Границы: вид границ определяется свойствами границ элемента, порождающего блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктирная, сплошная и тому подобное, цвета и толщины.

4. Отступы: область отступов всегда прозрачна, соответственно, сквозь нее можег просвечивать фон родительских элементов. Таким образом, отступы как бы наследуют фон от родительского элемента.

 

Поля.

Это специальные области, позволяющие задать некое свободное, ничем не занятое про странство вокруг границы блока. Регулируя величину полей, можно управлять расстоянием между блоками, например уменьшить или увеличить абзацный отступ между абзацами.

Все поля для этого абзаца будут вычислены автоматически.

Допустимы также отрицательные значения, в этом случае поля соседних блоков могут перекрываться. О таких ситуациях поговорим после того, как более подробно изучим блоковую модель CSS.

Свойство margin

Это стенографическое свойство используется для краткой записи значений свойств margin-top, margin-right, margin-bottom и margin-left. Свойство margin может иметь одно, два, три или четыре значения. Если задано только одно значение, это означает, что величины полей со всех сторон одинаковые:

P { margin: 1em }

 

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

Если заданы два значения, то первое относится к верхнему и нижнему полям, второе - к правому и левому, при этом значения каждой пары будут равны.

DIV { margin: 10рх 5 px }

 

В данном примере для контейнеров div будут установлены поля по 10 пикселей сверху и снизу, и по 5 пикселей слева и справа. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, а третье - к нижнему.

BODY { margin: 0px 15px 5рх }

 

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

Если заданы все четыре значения, то они соответственно будут отвечать верхнему, правому, нижнему и левому полям. Иначе говоря, задание размеров начинается с верхнего поля и далее по часовой стрелке, заканчивая левым полем. Отсюда следует, что запись:

P { margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; margin-left: 1em; } эквивалентна правилу: P { margin: 0.5em 0.5em 0.5em 1em }

Замечание. Такой вариант стенографической записи является единственно возможным в том случае, когда для левого и правого полей требуется задать разные значения.

В HTML есть некий аналог этих свойств CSS. Это атрибуты bottoramargin, top-margin, leftmargin и rightmargin. Применять их можно только в элементе BODY для регулирования размеров полей страницы. При помощи свойств CSS можно регулировать поля любых элементов, если, конечно, это поддерживается браузерами. Для всех элементов блочного уровня поля margin поддерживаются без проблем, чуть хуже дело обстоит со строчными элементами.

 

Границы

Границы блоков, так же как отступы и поля, делятся на четыре сегмента: верхний, правый, нижний и левый. Каждый отдельный сегмент границы блока может иметь свои характеристики: цвет, толщину, тип линий. Для задания характеристик могут использоваться отдельные свойства или стенографические свойства, позволяющие записывать правила в более краткой форме.

Свойство border-width

Это свойство стенографического типа задает значения свойств border-top-width, border-right-width, border-bottom-width, border-left-width. Свойство border-width может имееть одно, два, три или четыре значения.

Если задано только одно значение, это означает, что толщина всех сегментов границы вокруг блока одинакова:

P { border-width: 1px }

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

 

DIV { border-width: thin mediun }

 

В этом примере для контейнеров DIV устанавливаются тонкие (thin) сегменты границы сверху и снизу контейнера и средние по толщине (mediun) слева и справа.

Если задано три значения, то первое применяется к толщине верхнего сегмента границы, второе - левого и правого, а третье - нижнего сегмента.

H1 { border-width: 0px lpx 2px }

 

В этом примере верхний сегмент границы заголовка отсутствует, слева и справа границы они будут одинаковы - по 1 пикселю, а толщина нижнего сегмента будет равна 2 пикселям. Если заданы все четыре значения, то они будут отвечать толщине верхнего, правого,; нижнего и левого сегментов границы соответственно. Иначе говоря, задание толщины сегментов границы начинается с верхнего и далее по часовой стрелке, заканчивая левым сегментом. Следовательно, запись:

P (border-top-width: 1px; border-right-width: medium; border-bottom-width 2px; border-left-width: thin } будет эквивалентна правилу: P (border-width: lpx medium 2px thin }

 

Свойство border-color

Это свойство стенографического типа задает цвет границы блока. Если требуется задать различные цвета для четырех составляющих границ, то можно пользоваться индивидуальными свойствами:

• border-top-color - цвет верхнего сегмента границы;
• border-right-color - цвет правого сегмента границы;
• border-bottom-color - цвет нижнего сегмента границы;
• border-left-color - цвет левого сегмента границы.

Значением индивидуальных свойств может быть значение цвета, указанное любым доступным в CSS способом:

• ключевым словом (red, yellow, silver и т.д.);
• шестнадцатеричным кодом цвета в полной форме (#00FFCC, #eeddaa) или сокращенно (#0FC, #EDA);
• десятичным кодом в модели RGB (color: rgb(25, 205, 172)).

В качестве примера раскрасим сегменты границы блока в разные цвета:

P { border-top-color: red; border-right-color: #EDA; border-bottom-color: #41A41C; border-left-color: rgb(25, 205, 172) }

 

Значение свойства border-color, которое является стенографическим, объединяет значения индивидуальных свойств. Единственное (но очень важное!) отличие в том, что вкачестве значения свойства border-color может использоваться ключевое слово transparent. При этом граница будет прозрачной, но все же будет иметь ширину. Данное значение не поддерживается браузерами фирмы Microsoft - в них граница будет иметь либо цвет по умолчанию (черный), если цвет ранее не задавался, либо цвет, унаследованный от родительского элемента.

Свойство border-style

Это свойство стенографического типа задает тип линий, которыми будут отображаться границы блока. Если требуется задать различные типы линий для четырех составляющих границ, то можно пользоваться индивидуальными свойствами:

• border-top-style - тип линии верхней границы;
• border-right-style - тип линии правой границы;
• border-bottom-style - тип линии нижней границы;
• border-left-style - тип линии левой границы.

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

• none - граница отсутствует, в результате значение свойства border-width также равно нулю. Это значение используется по умолчанию.
• hidden - подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS.
• dotted - граница отображается линией, составленной из точек.
• dashed - граница отображается пунктирной линией.
• solid - граница отображается сплошной линией.
• double - граница отображается двойной сплошной линией. Сумма значений ширины двух линий и расстояния между ними должна быть равна значению свойства border-width. Самая распространенная ошибка при использовании этого значения - задать ширину линии 2 пикселя и стиль double. В этом случае невозможно отобразить двойную линию, так как минимальная возможная ширина линии на экране монитора - 1 пиксель, поэтому для отображения двойной линии и расстояния между ними необходимо минимум 3 пикселя. Соответственно, при ширине в 2 пикселя двойную линию отобразить невозможно. В результате получается обычная сплошная линия, но толщиной в 2 пикселя.
• groove - граница отображается "вдавленной" линией с имитацией объема.
• ridge - противоположно значению groove. Граница отображается "выпуклой" линией с имитацией объема.
• inset - граница отображается так, что весь блок выглядит как бы вдавленным (похоже на нажатую кнопку).
• outset - противоположно значению inset. Весь блок выглядит выпуклым.

1. hidden	Подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS
2. dotted	Граница отображается линией, составленной из точек
3. dashed	Граница отображается пунктирной линией
4. solid	Граница отображается сплошной линией
5. double	Граница отображается двойной сплошной линией
6. groove	Граница отображается "вдавленной" линией с имитацией объема
7. ridge	Граница отображается "выпуклой" линией с имитацией объема
8. inset	Граница отображается так, что весь блок выглядит как бы вдавленным
9. outset	Граница отображается так, что весь блок выглядит как бы "выпуклым"

 

Стенографическое свойство border-style по аналогии с border-width позволяет сокращенно записать значения стилей для всех четырех сегментов границы. Оно допускает задание одного, двух, трех или четырех значений. Применение этих значений аналогично свойству border-width.

P { border-style: solid dotted } Стиль верхней и нижней границы вокруг абзаца будет solid, а для левой и правой — dotted.

 

Свойство border

Это свойство является стенографическим и используется для одновременного задания параметров всех четырех сегментов границы: ширины, цвета и стиля. В отличие от стенографических свойств margin и padding, свойство border не может устанавливать различные значения для отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы, а именно border-top, border-right, border-bottom и border-left.

P { border: 1px solid red; }

Граница вокруг этого абзаца будет одинаковой со всех четырех сторон: сплошная линия красного цвета толщиной 1 пиксель.

Отступы позволяют отделить основное содержимое блока от границы таким образом, чтобы граница располагалась на некотором расстоянии от содержимого.

Свойства padding

Это стенографическое свойство используется для краткой записи значений свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding может иметь одно, два, три или четыре значения. Значения присваиваются также, как для полей и границ. Рассмотрим такой код:

Р { background-color:#FFC; border:1px solid blue; padding:0.5em 1em; }

 

Отступы

Ha примере этого абзаца рассмотрим, как работают отступы. В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа.

Первый абзац оформляется именно таким стилем, для второго абзаца значение свойства padding переопределяется и устанавливается равным нулю. В результате, согласно правилам каскадирования, отступы у второго абзаца должны отсутствовать. В окне браузера мы увидим такую картину, как показано на рисунке:

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0 em сверху, снизу, слева и справа

 

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

Различные отступы для отдельных сторон блока можно задавать при помощи именных свойств:

Р { padding-top: 0.5em; padding-right: 10рх; padding-bottom: 3%; padding-left: 1em; }

Порядок задания значений такой, как для полей и границ: начиная с верхнего отступа, далее по часовой стрелке правый и нижний, последним задается левый отступ. Таким образом, два приведенных выше правила будут эквивалентны по содержанию, но второе существенно короче по записи.

Поля или отступы

В каких же случаях следует пользоваться отступами, а в каких - полями. Вот несколько принципиальных отличий полей и отступов. Рассмотрим первое отличие. Отступы располагаются внутри границ блока, поля - за их пределами. Для иллюстрации рассмотрим два класса:

p_mar { background-color: #FFC; border:1px solid blue; margin: 2em } p_pad { background-color: #FFC; border:1px solid blue; padding: 2em }

Оформим два различных абзаца при помощи этих классов:

<Р class="p_mar"> Для этого абзаца используется класс "p__mar", для него заданы поля размером 2em.</P> <Р class="p_pad"> Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.</P>

В результате в окне браузера мы увидим эти абзацы так, как показано на рисунке:

 

Для этого абзаца используется класс "p_mar", для него заданы поля размером 2em.

 

Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.

 

Как вы видите, в первом случае, когда используются поля, " пустые " места расположены за пределами границы блока, внутри блока отступов нет. Во втором случае, когда используются отступы, " пустоты " расположены внутри границы блока.

На отступы распространяется фон блока и фоновое изображение, а на поля нет. Поля всегда прозрачны, сквозь них просвечивает фон родительского элемента.

Наконец, третье отличие. Размеры полей могут иметь отрицательные значения, а размеры отступов только положительные.

Рассмотрим такой пример. Пусть мы имеем заголовок первого уровня и следом за ним идет текст некоего абзаца:

<Н1>Заголовок</Н1> <Р>Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок.</Р>

Как такой код будет выглядеть в окне браузера, показано ниже:

Заголовок Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок

Теперь если для заголовка написать стиль с использованием свойства margin и задать ему отрицательное значение, то можно "надвинуть" заголовок на текст, сократив расстояние между блоками. Используем, например, отрицательное значение свойства margin-bottom:

H1 { margin-bottom: -1em; }

После добавления этой строчки кода вид окна браузера изменится, как показано ниже:

Заголовок Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок

 

За счет отрицательного значения нижнего поля (margin-bottom: -1em) мы добились сокращения расстояния между блоками H1 и Р на 1em, в результате чего и произошло наслаивание заголовка на текст абзаца.

Краткое описание всех свойств управления характеристиками блоков в SCC приведено в таблице:

Свойства CSS для управления характеристиками блоков
Свойство	Описание	Пример
margin-top margin-right margin-bottom margin-left margin	Четыре индивидуальных свойства, которые устанавливают величину верхнего, правого, нижнего и левого полей, и стенографическое свойство задания всех полей одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины, процентах от ширины родительского блока. Допустимы отрицательные значения.	TD {margin: 10 рх} H1 {margin-bottom: -1em}
padding-top padding-right padding-bottom padding-left padding	Четыре индивидуальных свойства, которые устанавливают величину верхнего, правого, нижнего, левого отступов, и стенографическое свойство для задания всех отступов одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины, процентах от ширины родительского блока. Отрицательные значения не допускаются.	TD {padding: 10px} P {padding: 0.5em 1em} H1 {padding-bottom: 12pt}
border-top-width border-right-width border-bottom-width border-left-width border-width	Четыре индивидуальных свойства, которые устанавливают ширину верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания толщины всех сегментов границы одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины и при помощи ключевых слов: thin, medium, thick. Отрицательные значения и значения в процентах не допускаются.	Р {border-width: 1px Зрх } Р {border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin;}
border-top-color border-right-color border-bottom-color border-left-color border-color	Четыре индивидуальных свойства, которые устанавливают цвет верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания цвета всех сегментов границы одновременно (от 1 до 4 значений). В качестве значений используется любой из трех способов задания цвета.	P {border-color: red} P.green {border-color: rgb (0,255,0)} H1 {border-color: #336}
border-top-style border-right-style border-bottom-style border-left-style border-style	Четыре индивидуальных свойства, которые устанавливают тип линий верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания типа линий всех сегментов границы одновременно (от 1 до 4 значений). В качестве значений используются ключевые слова: none | dotted | dashed | solid | double | groove | ridge | inset | outset	P {border-style: solid}
border-top border-right border-bottom border-left border	Четыре индивидуальных стенографических свойства, которые устанавливают стиль верхнего, правого, нижнего и левого сегментов границы блока в отдельности (значения свойств идут в следующем порядке: border-width, border-style, border-color), и общее стенографическое свойство для определения стиля всех сегментов границы блока одновременно. В последнем случае все сегменты границы будут одинаковыми - задание разных стилей для разных сегментов границы осуществляется через индивидуальные свойства этой группы	P {border: lpx solid red} P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

Ход работы

1. Рассмотреть методы формирования блоков.

2. Создать в своем документе поля, границы и отступы.

3. Уяснить различия между полями и отступами

4. Использовать рассмотренные методы форматирования документа в своем html-документе

 

3. Задание для самостоятельного выполнения

1. Применить рассмотренные правила форматирования отступов.

2. Применить рассмотренные правила форматирования полей.

3. Применить рассмотренные правила форматирования границ.

 

Содержание отчета

1. Выполнить все пункты задания.

2. Представить коды выполненных операций.

3. Представить результат выполненной работы.

4. Исходные файлы сбросить на сервер \\ academy.

 

 

5. Задания и вопросы для аттестации

1.Сформулируйте правила создания границ.

2. Сформулируйте правила создания полей.

3. Сформулируйте правила создания отступов.

4. В каких случаях следует пользоваться отступами, а в каких – полями.

 

ЛАБОРАТОРНАЯ РОБОТА № 12

Блоки в CSS

Теоретические сведения

В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-Р6, Р, DIV. они отделяются от других абзацными отступами.

Строчные элементы не создают визуальной самостоятельной структурной единицы и выводятся линейной строкой. Примеры: элементы I, B, U, S, ЕМ и др.

Блоки.

Два блочных элемента не могут располагаться в одной строке, а два строчных, соответственно, могут.

Модель представления документов в CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента р содержимым блока является текст абзаца.

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

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

Также блок может иметь отступы (margin), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. На рисунке приведена обобщенная структура блока в CSS.

Рис. 1. Структура блока в CSS

 

Все поля, границы и отступы делятся соответственно на верхние, нижние, правые! и левые. Для каждого из них можно задать значения независимо от других. Фон для различных областей блока задается следующим образом:

1. Область содержимого: фон задается свойством background элемента, порождающего данный блок.

2. Поля: фон задается свойством background элемента, порождающего данный блок.

3. Границы: вид границ определяется свойствами границ элемента, порождающего блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктирная, сплошная и тому подобное, цвета и толщины.

4. Отступы: область отступов всегда прозрачна, соответственно, сквозь нее можег просвечивать фон родительских элементов. Таким образом, отступы как бы наследуют фон от родительского элемента.

 

Поля.

Это специальные области, позволяющие задать некое свободное, ничем не занятое про странство вокруг границы блока. Регулируя величину полей, можно управлять расстоянием между блоками, например уменьшить или увеличить абзацный отступ между абзацами.

Свойство margin-top, margin-right, margin-bottom, margin-left

Эти свойства определяют величину полей вокруг блока:

• margin-top - задает ширину верхнего поля;
• margin-right - задает ширину правого поля;
• margin-bottom - задает ширину нижнего поля;
• margin-left - задает ширину левого поля.

Значения могут задаваться в любых единицах длины, а также в процентах. Процентное соотношение в этом случае вычисляется относительно контейнера, породившего этот блок. Контейнером для любого блока служит родительский элемент. Давайте разберем способы задания полей на примере всей Web-страницы. По умолчанию в любом браузере они имеют определенное ненулевое значение. Помните, когда мы верстали страницы при помощи таблиц, вокруг таблицы присутствовали белые поля.

Чтобы их устранить при помощи CSS, следует записать такое правило:

BODY { margin-top: 0рх; margin-right: 0px; margin-bottom:0px; margin-left:0px; }

 

Если для страницы требуется установить поля по 10% от ширины страницы справа и слева, а поля сверху и снизу не нужны, то правило будет выглядеть так:

BODY { margin-top: 0px; margin-right: 10%; margin-bottom: 0px; margin-left: 10%; }

 

В качестве значения может быть также использовано ключевое слово auto, при этом величины полей вычисляются автоматически, и результат будет зависеть от множества факторов. Пока мы их подробно рассматривать не будем, поскольку еще не обладаем необходимым набором знаний, но позже обязательно вернемся к этому вопросу.

P { margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; }