HTML Перетяжка Стиль

Так у меня есть этот HTML код:HTML Перетяжка Стиль

<!DOCTYPE html> 
<html> 
    <body> 
     <div style="background-color:black;color:white;padding:20px"> 
     <h2>London</h2> 
    </body> 
</html>

Мой вопрос, что делает padding:20px свойства делать в атрибуте стиля для div элемента? Это то же самое, что и у padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?

Я попытался положить (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) в h2 элемента в качестве атрибута, как это (удалить padding:20px из атрибута стиля в div элемента):

<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>

Но по какой-то причине в выше, дал мне другой результат, чем положить padding:20px в атрибут стиля элемента div. Может ли кто-нибудь объяснить мне эту разницу? Заранее благодарю за помощь!

источник

2015-07-22 LP496

Ваш синтаксис полна ошибок.

Он должен быть

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>

и да, короче это идентично

<h2 style="padding: 20px">London</h2>

Существует также три другие короткие формы:

padding: 10px 5px;

означает применять 10px top/bottom и 5px влево/вправо.

padding: 10px 5px 0;

означает применить верхнюю часть 10px, 0 к нижней и 5px влево/вправо.

padding: 1px 2px 3px 4px;

означает применять 1px сверху, 2px право, 3px дно, 4px влево (по часовой стрелке, начиная сверху).

источник

2015-07-22 05:35:27 connexo

Это было чрезвычайно полезным ответом. Понимание других форм атрибута заполнения действительно помогло мне. Большое вам спасибо за то, что объяснили это! Также один быстрый вопрос ... Является ли стиль атрибутом h2 html-элемента или это просто атрибут CSS? – LP496

Это так называемый универсальный атрибут, который в основном означает, что он доступен для всех элементов HTML. Тем не менее, широко распространено мнение о том, что использовать его невозможно, за исключением особых случаев, когда свойства css (например, background-image) должны устанавливаться динамически. Обычный способ сделать это состоит в том, чтобы поместить ваши стили в класс css в таблицу стилей CSS, а затем применить это к вашим элементам через (снова) универсальный атрибут 'class'. – connexo

Хорошо! Теперь это имеет смысл. Большое вам спасибо за помощь! – LP496

Да, padding:20px; применяет одинаковое количество прокладок со всех сторон вашего элемента.

Возможно, ваш HTML-код неверен. Сделайте это:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

или просто

<h2 style="padding:20px">London</h2>

источник

2015-07-22 05:33:50

не действует

<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>

использование

h2{ 
 
    background: #ccc; 
 
}

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Fiddle

источник

2015-07-22 05:37:06 Dmitriy

Огромное спасибо за помощь Дмитрию! Я понимаю свою ошибку сейчас! – LP496

твой, h2 стиль обивка неверен.

вы должны добавить style для элемента h2.

<h2 style="padding:20px">London</h2>

источник

2015-07-22 05:37:24 pcs

Если вы собираетесь применять отступы для всех сторон одновременно, вы лучше просто использовать padding:20px в качестве значения для стиля, так как это сокращает размер кода.

Смотрите эту ссылку для большего количества примеров на использование CSS дополнения:

http://www.w3schools.com/css/css_padding.asp

источник

2015-07-22 05:37:30 Mike

попробовать это. вы будете знать, как работает прокладка. обивка для позиционирования/элемента текста элемента (родителя)

<div style="background-color:black;color:white;padding:20px"> 
 
    
 
    <h2 style="border: solid 1px red">London</h2> 
 
    
 
    </div>

источник

2015-07-22 05:39:34 Raghavendra

-1

обивка: 20px означает, что вы даете 20px отступы от верхней правой нижней левой. Вы имеете в виду padding-top, padding-right .... а не padding: right, padding: top и т. Д., Потому что этот не работает на моем.

источник

2015-07-22 05:42:26

Ваш синтаксис полностью wrong.It будет

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; 
padding-left: 20px">London</h2>

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

<h2 style="padding: 20px;">London</h2>

Или вы также можете написать как padding:10px 20px 30px 40px; это означает padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,

Padding: 10px 20px это означает padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px

Padding: 10px 30px 20px это означает padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px

источник

2015-07-22 05:42:31 Chandresh

Большое спасибо за помощь Chandresh! Я понимаю свою ошибку сейчас! – LP496

Спасибо за редактирование Saina! Помогли много узнать разные формы. – LP496

Padding:20px будет применять отступы во всех 4-х направлениях.

Вы также можете написать этот способ padding:20px 20px 20px 20px; это идет как этого padding : top right bottom left

SO вместо или писать обивка-вправо, ветряные верхом и два других, можно просто написать отступы и применить правильное левое верхнее нижнее значение обивки для Это. Этот метод полезен, когда мы хотим применять разные значения заполнения для всех направлений. Подобно padding: 5px 10px; Это будет применять отступы 5px сверху и снизу и 10px слева направо;

Возможно, ваш HTML-код неверен.Сделайте это:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

ИЛИ

<h2 style="padding:20px 20px 20px 20px;">London</h2>

или просто

<h2 style="padding:20px;">London</h2>

источник

2015-07-22 05:43:30

Ваш синтаксис CSS неверен

Правильный синтаксис:

<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>

ИЛИ

<h2 style="padding=20px;">London</h2>

ИЛИ

<h2 style="padding=20px 20px 20px 20px;">London</h2>

источник

2015-07-22 05:57:16 shhrzl

h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`

источник

2015-07-22 06:08:37 Nandhini

HTML Перетяжка Стиль

ответ

Смежные вопросы