Посмотрим на примере, создайте html-страницу со следующим кодом:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="first">Это текст в тегах div с id="first".
</div>
<div id="second">
<div id="third">Это текст в тегах div с id="third".</div>
<div id="fourth">Это текст в тегах div с id="fourth".</div>
</div>
</body>
</html>
Посмотрите на нашу страницу в браузере:
Как видите, содержимое тегов div располагается с абзацным отступом, т.е. одно под другим. На примере этой страницы мы и будем рассматривать свойства блоков.
Border (граница)
Границы в css можно задавать отдельно для каждой стороны:
Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью:
Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.
Значениями свойства style могут быть следующие ключевые слова:
Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:
#first{
border-bottom-style:double;
border-bottom-color:red;
border-left-style:solid;
border-left-width:2px;
border-left-color:blue;
border-right-style:solid;
border-right-width:2px;
border-right-color:yellow;
border-top-style:dotted;
border-top-color:green;
}
Посмотрим на результат в браузере:
Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком порядке).
Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами и полями далее:
#first, #second, #third, #fourth{
border: 1px solid red;
}
Сейчас, если посмотреть на нашу страницу в браузере,
то мы увидим наложение границ разных элементов друг на друга. Это происходит потому, что еще не заданы поля элементов.
Margin (поля)
Как вы помните, поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства:
p{
margin:5px 10px 15px 10px;
}
Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит еще короче:
p{
margin:5px 10px;
}
В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого - по 10 пикселов.
Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:
p{
margin:5px;
}
Значения полей можно задавать и в других единицах длины, и в процентах. Также величина значения может иметь отрицательное значение, что в некоторых случаях очень удобно использовать. Давайте для нашего примера зададим всем элементам одинаковую ширину полей - в 10 пикселов:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
}
Теперь наша страница в браузере выглядит так:
Обратите внимание текст в самих элементах прижат к границам, чтобы это исправить, давайте зададим ему отступы.
Padding (отступы)
Как вы помните, отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны отдельно, используя следующие свойства:
Как и с полями чаще удобнее использовать сокращенную запись, которая аналогична записи для полей.
Давайте зададим для элементов нашей страницы отступы: сверху и снизу - по 10 пикселов, а справа и слева - по 5 пикселов.
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
Теперь наша страница в браузере выглядит так:
Давайте зададим фон нашим элементам, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей - прозрачный.
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first, #second{
background:yellow;
}
#third, #fourth{
background:pink;
}
Теперь наша страница в браузере выглядит так:
Теперь давайте зададим ширину и высоту наших блоков, например, так:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first{
background:yellow;
width:300px;
height:100px;
}
#second{
background:yellow;
width:300px;
}
#third, #fourth{
background:pink;
width:300px;
height:100px;
}
Теперь наша страница в браузерах Opera, FireFox и Chrome выглядит так:
А в IE вот так:
Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. Исправим это так, чтобы во всех браузерах было одинаково:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first{
background:yellow;
width:300px;
height:100px;
}
#second{
background:yellow;
width:300px;
}
#third, #fourth{
background:pink;
width:270px;
height:100px;
}
Вот теперь во всех браузерах все в порядке:
Вообще разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно, а вот отображаться может по-разному.
Собственно мы рассмотрели все способы задания полей, отступов и границ. Как всегда в конце урока добавим то, что уже изучили, например, так:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
font-size:14px;
}
#first{
background:yellow;
width:300px;
height:100px;
text-align:center;
color:blue;
}
#second{
background:yellow;
width:300px;
text-align:center;
color:blue;
}
#third, #fourth{
background:pink;
width:270px;
height:100px;
text-align:left;
text-transform:capitalize;
word-spacing:8px;
color:red;
}
#first:first-letter{
color:red;
font-size:26px;
}
#third:first-letter, #fourth:first-letter{
color:blue;
font-size:26px;
}
Теперь страница выглядит так:
Надо сказать, что сегодня мы затронули основы блочной верстки сайта. Поэтому хорошенько разберитесь с полями, отступами и границами, чтобы в дальнейшем это не вызывало трудностей.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 9. Свойства - margin, padding, border
CSS - Урок 9. Свойства - margin, padding, border
Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span. div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.Посмотрим на примере, создайте html-страницу со следующим кодом:
Как видите, содержимое тегов div располагается с абзацным отступом, т.е. одно под другим. На примере этой страницы мы и будем рассматривать свойства блоков.
Border (граница)
Границы в css можно задавать отдельно для каждой стороны:
- border-top - верхняя граница.
- border-right - правая граница.
- border-bottom - нижняя граница.
- border-left - левая граница.
Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью:
- border-color - цвет всех границ.
- border-width - толщина всех границ.
- border-style - стиль всех границ.
Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.
Значениями свойства style могут быть следующие ключевые слова:
- none - граница отсутствует.
- dotted - граница состоит из точек.
- dashed - граница в виде пунктирной линии.
- solid - граница отображается сплошной линией.
- double - граница отображается двойной сплошной линией.
- groove - граница отображается вдавленной объемной линией.
- ridge - граница отображается выпуклой объемной линией.
- inset - граница отображается так, что весь блок выглядит вдавленным.
- outset - граница отображается так, что весь блок выглядит выпуклым.
Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:
Посмотрим на результат в браузере:
Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком порядке).
Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами и полями далее:
Сейчас, если посмотреть на нашу страницу в браузере,
то мы увидим наложение границ разных элементов друг на друга. Это происходит потому, что еще не заданы поля элементов.
Margin (поля)
Как вы помните, поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства:
- margin-top - ширина верхнего поля.
- margin-right - ширина правого поля.
- margin-bottom - ширина нижнего поля.
- margin-left - ширина левого поля.
Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит еще короче:
В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого - по 10 пикселов.
Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:
Значения полей можно задавать и в других единицах длины, и в процентах. Также величина значения может иметь отрицательное значение, что в некоторых случаях очень удобно использовать. Давайте для нашего примера зададим всем элементам одинаковую ширину полей - в 10 пикселов:
Теперь наша страница в браузере выглядит так:
Обратите внимание текст в самих элементах прижат к границам, чтобы это исправить, давайте зададим ему отступы.
Padding (отступы)
Как вы помните, отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны отдельно, используя следующие свойства:
- padding-top - ширина верхнего отступа.
- padding-right - ширина правого отступа.
- padding-bottom - ширина нижнего отступа.
- padding-left - ширина левого отступа.
Как и с полями чаще удобнее использовать сокращенную запись, которая аналогична записи для полей.
Давайте зададим для элементов нашей страницы отступы: сверху и снизу - по 10 пикселов, а справа и слева - по 5 пикселов.
Теперь наша страница в браузере выглядит так:
Давайте зададим фон нашим элементам, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей - прозрачный.
Теперь наша страница в браузере выглядит так:
Теперь давайте зададим ширину и высоту наших блоков, например, так:
Теперь наша страница в браузерах Opera, FireFox и Chrome выглядит так:
А в IE вот так:
Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. Исправим это так, чтобы во всех браузерах было одинаково:
Вот теперь во всех браузерах все в порядке:
Вообще разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно, а вот отображаться может по-разному.
Собственно мы рассмотрели все способы задания полей, отступов и границ. Как всегда в конце урока добавим то, что уже изучили, например, так:
Теперь страница выглядит так:
Надо сказать, что сегодня мы затронули основы блочной верстки сайта. Поэтому хорошенько разберитесь с полями, отступами и границами, чтобы в дальнейшем это не вызывало трудностей.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|