.site-header .container{ padding-top:0} .site-title{ background:none;padding-top:0}


Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле сверху от текста

Синтаксис

padding-top: значение | inherit

Значения

Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>padding-top</title>
<style>
.layer {
background: #fc3; /* Цвет фона */
border-top: 5px solid #000; /* Параметры верхней линии */
border-bottom: 5px solid #000; /* Параметры нижней линии */
padding: 5px; /* Поля вокруг текста */
padding-top: 10%; /* Поле сверху */
padding-bottom: 10%; /* Поле снизу */
}
</style>
</head>
<body>
<div class=»layer»>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства padding-top

Объектная модель

[window.]document.getElementById(«elementID»).style.paddingTop

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источник: htmlbook.ru
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 		/* ————————————————————————- *
 *  Section: Header
/* ————————————————————————- */
#header { background: #33363b; position: relative; padding-bottom: 60px; }
#header .pad { padding-top: 28px; padding-bottom: 30px; }
#header .container-inner { position: relative; }
.block1{ position: absolute; left:1000px; top: 30px;} /*первый блок*/
.block2{ position: absolute; left:1000px; top: 130px;} /*второй блок*/
.block3{ position: absolute; left:700px; top: 30px;} /*третий блок*/
.block4{ position: absolute; left:700px; top: 130px;} /*четвертый блок*/
.block5{ position: absolute; left:1115px; top: 165px;} /*Социальные сети*/
.block6{ position: absolute; left:863px; top: 165px;} /*Проверка кода*/
.block7{ position: absolute; left:575px; top: 165px;} /*Бюро находок*/
 
 
.site-title { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0; }
.site-title a { display: block; color: #fff; float: left; max-width: 100%; white-space: nowrap; }
.site-title a img { float: left; display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
.site-description { font-size: 16px; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; }
 
/*  header : search
/* ———————————— */
.toggle-search { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px; display: block; position: absolute; right: 0; top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
.toggle-search:hover,
.toggle-search-expand .toggle-search { background: rgba(0,0,0,0.15); color: #fff; }
.toggle-search-expand .search-expand  { display: block; }
.search-expand { display: none; background: #26272b; position: absolute; top: 0; right: 0; width: 340px; }
.search-expand-inner { background: rgba(0,0,0,0.15); padding: 15px; }
.search-expand .themeform input { width: 100%; border: 2px solid #e2e2e2; border-radius: 0; }
.search-expand .themeform input:focus {  }
 
/*  header : nav topbar
/* ———————————— */
#nav-topbar.nav-container { background: #26272b;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #fff; color: rgba(255,255,255,0.7); }
 
@media only screen and (min-width: 1025px) {
    /* fixed nav */
    .topbar-enabled #header { padding-top: 50px; }
    #nav-topbar.nav-container { position: fixed; top: 0; width: 100%; z-index: 999; }
    .admin-bar #nav-topbar.nav-container { top: 28px; }
}
 
@media only screen and (min-width: 720px) {
 
    /* common */
    #nav-topbar .nav {  }
    #nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); }   
    /* level 1 */
    #nav-topbar .nav > li { border-right: none; }
    #nav-topbar .nav > li > a:hover,
    #nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
    #nav-topbar .nav li > a:hover,
    #nav-topbar .nav li:hover > a,
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-menu-ancestor > a,
    #nav-topbar .nav li.current-post-parent > a { color: #fff; }
    /* level 2 & 3 */
    #nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; }
    #nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    #nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
   
}
@media only screen and (max-width: 719px) {
   
    /* common */
    #nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); } 
    /* level 1 */
    #nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }
   
}
 
/*  header : nav header
/* ———————menuuuuu—————- */
#nav-header.nav-container { background-color: #477587; z-index: 97;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .container { padding: 0 15px; }
#nav-header .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); }
 
@media only screen and (min-width: 720px) {
 
    /* common */
    #nav-header .nav {  }
    #nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }   
    /* level 1 */
    #nav-header .nav > li { border-right: none; }
    #nav-header .nav > li > a:hover,
    #nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
    #nav-header .nav li > a:hover,
    #nav-header .nav li:hover > a,
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-menu-ancestor > a,
    #nav-header .nav li.current-post-parent > a { color: #fff; }
    /* level 2 & 3 */
    #nav-header .nav ul { background: #33363b url(img/opacity-10.png) repeat; }
    #nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    #nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
   
}
@media only screen and (max-width: 719px) {
   
    /* common */
    #nav-header.nav-container  { border-left: 0; border-right: 0; }
    #nav-header .container { padding: 0; }
    #nav-header .nav { padding-bottom: 20px; }
    #nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); } 
    /* level 1 */
    #nav-header .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }
   
}
Источник: www.cyberforum.ru

CSS свойства

Определение и применение

CSS свойство padding-top устанавливает верхний внутренний отступ элемента.

На изображении салатовым цветом обозначена зона за которую отвечает свойство padding-top:

Поддержка браузерами

CSS синтаксис:

padding-top:»length | initial | inherit»;

JavaScript синтаксис:

object.style.paddingTop = «5px»

Значения свойства

Значение Описание
length Определяет внутренний отступ элемента в пикселях, см и др. единицах. Значение по умолчанию 0.
Отрицательные значения не допускаются.
% Определяет внутренний отступ элемента в процентах от содержащего блока родительского элемента.
Отрицательные значения не допускаются.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style>
.primer {
width : 33%; /* задаём ширину блока */
padding-top : 15px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 15px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 150px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : orange; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer1 {
width : 33%; /* задаём ширину блока */
padding-top : 25px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 25px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 5px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 25px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : yellow; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width : 33%; /* задаём ширину блока */
padding-top : 5px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom:25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 75px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : lime; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width : 33%; /* задаём ширину блока */
padding-top : 40px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 75px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 100px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : blue; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
<body>
<div class = «primer»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer1»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer2»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer3»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>


Пример использования внутренних отступов элемента.CSS свойства

Источник: basicweb.ru

  • Перевод
  • Tutorial

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

<header>
<h1>Super Bad</h1>
<nav><a>First Link</a><a>Second Link</a><a>Third Link</a></nav>
</header>

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

header {
text-align: justify;
letter-spacing: 1px;
height: 8em;
padding: 2em 10%;
background: #2c3e50;
color: #fff;
}

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

header h1,
header nav {
display: inline-block;
}

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

header::after {
content: »;
display: inline-block;
width: 100%;
}

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

header h1 {
height: 100%;
}

header h1::before {
content: »;
display: inline-block;
vertical-align: middle;
height: 100%;
}

В результате получается то, что нужно:

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

Используем трюк с псевдоэлементом на header:

CSS-код

header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}

header > div {
width: 50%;
height: 100%;
text-align: left;
}

header > div::before {
content: »;
display: inline-block;
vertical-align: middle;
height: 100%;
}

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header h1,
header nav {
display: inline-block;
vertical-align: middle;
}

header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}

header nav {
padding-top: 1em;
}

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){

header {
height: auto;
}

header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}

}

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

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: ‘Lato’, sans-serif; text-transform: uppercase; letter-spacing: 1px;}

header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}

header > div {
height: 100%;
}

header > div::before {
content: »;
height: 100%;
}

header > div h1 {
font-size: 3em;
font-style: italic;
}

header nav a {
padding: 0 0.6em;
white-space: nowrap;
}

header nav a:last-child {
padding-right: 0;
}

@media screen and (max-width: 720px){

header {
height: auto;
}

header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}

}

Результат:


Теги:
  • header
  • css
  • justify
  • шапка
  • выравнивание
Источник: habr.com