Как мне создать Padding в CSS?
CSS-заполнение позволяет HTML-кодеру устанавливать отступы по умолчанию или мертвое пространство вне HTML-элемента. Преимущество этого состоит в том, что это избавляет кодировщика от повторения кода заполнения для каждого экземпляра этого элемента и упрощает согласованность на странице. Добавляемый HTML-элемент может представлять собой любое количество вещей, например абзац, таблицу или заголовок.
Чтобы создать отступы в CSS, сначала нужно определить HTML-элемент, который вы хотите заполнить. Этот элемент, который вы хотите заполнить, называется селектором. Затем вы захотите указать соответствующие значения отступов. В CSS существует пять различных типов свойств заполнения - одно для всех четырех сторон элемента одновременно и четыре других для каждой отдельной стороны элемента (например, левая сторона, правая сторона, верхняя сторона или нижняя сторона). ). Свойство, которое позволяет программисту указывать значения сразу для всех четырех сторон HTML-элемента, называется сокращенным свойством .
Язык кодирования, используемый для указания одного объявления заполнения CSS, - это просто слово «заполнение». После этой метки отображаются соответствующие «значения» заполнения или информация о требуемом объеме пространства, обычно представляемая либо пикселями, либо процент. Заполнение и значения записываются в фигурных или фигурных скобках (т. Е. "{" И "}"). Все это предшествует добавляемому HTML-элементу (например, «p» для абзаца или «H2» для заголовков уровня 2).
С точки зрения того, как представлено значение, значения могут быть представлены в пикселях (например, 1px или 5px), точках (например, 1pt или 5pt) или дюймах (например, 1in или 5in) или сантиметрах (например, 1cm или 5cm) , Значения также могут быть объявлены в процентах от стиля HTML-элемента. Например, если значение равно 50%, отступ будет равен половине размера элемента.
Следующие примеры представляют собой HTML-код для заполнения HTML-элемента посредством значений, отображаемых в процентах и длине соответственно. Если назначено только одно значение, веб-браузеры назначат этот отступ всем четырем сторонам элемента HTML.
обивка: 10%;
обивка: 100px;
Добавление большего количества значений к описанному выше типу объявления заполнения приведет к тому, что веб-браузеры интерпретируют их определенным образом. Если назначены два значения, первое будет соответствовать верхнему и нижнему, а второе соответствует левому и правому. Три значения приведут к тому, что первое будет ссылаться на верхнюю часть, второе - на левую и правую стороны, а третье - на нижнюю часть HTML-элемента. При назначении максимум четырех значений первое, второе, третье и четвертое значения соответствуют верхнему, правому, нижнему и левому краям HTML-элемента в указанном порядке. Если указано несколько значений, они должны быть разделены пробелами и заканчиваться точкой с запятой, например:
отступы: 10px 20px 10px 20px;
Заполнение в CSS также может выполняться по одной стороне. В связи с этим доступно еще четыре свойства заполнения. Это padding-top, padding-right, padding-bottom и padding-left. Чтобы создать заполнение в CSS более точным способом, вам нужно пометить свойства тем же синтаксисом, что и в сокращенных объявлениях, описанных выше. Каждое из этих свойств заполнения принимает только одно значение длины или процента. Например:
обивка-топ: 10px;
обивка-направо: 20px;
обивка-дно: 10px;
обивка налево: 20px;
Следующий код создает веб-страницу, объявляет свойства отступа между тегами стиля, а затем использует их в элементе абзаца, указанном тегом p. Текст между / * и * / является примечаниями, объясняющими тип используемого заполнения, и не будет включен в код заполнения CSS.
<HTML>
<Голова>
<style type = "text / css">
p.example1 {padding: 10px;} / * Сокращенное заполнение для всех четырех сторон * /
p.example2 {padding: 50px 30px;} / * Сокращенное заполнение сверху и снизу, затем слева и справа * /
p.example3 {
обивка-топ: 10px;
обивка-дно: 20px;
обивка-дно: 10px;
обивка налево: 20px;
} / * индивидуальные отступы. * /
</ Стиль>
</ HEAD>
<Тело>
<p class = "example1"> Этот текст имеет одинаковые отступы на каждой стороне. Заполнение с каждой стороны составляет 10 пикселей. </ P>
<p class = "example2"> Этот текст имеет верхний и нижний отступы 50px и левый и правый отступы 30px. </ p>
<p class = ”example3”> Этот текст имеет верхний отступ 10px, правый отступ 20px, нижний отступ 10px и левый отступ 20px. </ p>
</ Body>
</ Html>
В приведенном выше примере «example1» и т. Д. - это имена, присвоенные классу, на которые затем ссылаются в абзацах. Точка между тегом p и именами классов в начале кода обозначает объявление класса, назначенного абзацу. Обратите внимание на фигурные скобки после объявления класса, содержащего присваивания значений свойств заполнения.
Хотя это может показаться большой работой, это гораздо менее трудоемко, чем указание заполнения для каждого отдельного абзаца. Вы можете объявить одно свойство padding для требуемого элемента, который в приведенном выше примере является тегом p, а затем ссылаться на класс, когда вы используете элемент между тегами body страницы. Если для всех абзацев требуется только один тип отступов, вам не нужно использовать классы вообще. Просто используйте следующий код между тегами стиля, а затем закодируйте абзацы без указания какого-либо класса. Этот код будет идти между тегами body вместо кода в приведенном выше примере.
p {padding: 10px 20px 10px 20px;}
Это заполнение CSS, которое это создаст, повлияет на все абзацы, даже если не указан класс.