border css свойство рамки block css margin padding


CSS

Блочная модель

меню

border css свойство рамки block css margin padding


     Блочная модель 

Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

Схематическая структура блочного элемента.

      margin-top, margin-right, margin-bottom, margin-left  

Устанавливает ширину поля для определенной стороны элемента.(эти свойства устанавливает ширину соответственно верхнего, нижнего и левого поля).

Значение:

  • любая соответствующая стандарту длина - число, представляющее ширину поля. Значение по умолчанию является 0.
  • любое соответствующая стандарту процентное значение - отношение в процентах ширены поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
  • inherit - применяется значение родительского элемента.

    p {margin-top: 10px;}

Примеры: [1][2][3]

      margin  

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

Значение:

  • margin-top - ширина верхнего поля.
  • margin-right - ширина правого поля.
  • margin-bottom - ширина нижнего поля.
  • margin-left - ширина левого поля.
  • inherit - применяется значение родительского элемента.

    p {margin: 20px 30px 5px }

      padding-top, padding-right, padding-bottom, padding-left  

Устанавливает ширину промежутка между содержимым элемента и определенным его участком его границы (соответственно верхнем, правым, нижним и левым).

Значение:

    p {padding-top: 20px}

     padding  

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

Значение:

  • padding-top - ширина верхнего промежутка.
  • padding-right - ширина правого промежутка.
  • padding-bottom - ширина нижнего промежутка.
  • padding-left - ширина левого промежутка.
  • inherit - применяется значение родительского элемента.

   h1{padding: 5px 5px 3px}

      border-top-width, border-right-width, border-bottom-width, border-left-width  

устанавливает ширину рамки для определенной стороны (соответственно верхней , правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

  • thin - рамка в виде тонкой линии.
  • medium - рамка в виде линии средней толщены. (по умолчанию)
  • thick - рамка виде толстой линии.
  • inherit - применяется значение родительского элемента.

   p { border-top-width: 5px }

Примеры: [1]

      border-width  

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

Значение:

  • border-top-width - толщина верхней стороны.
  • border-right-width - толщина правой стороны.
  • border-bottom-width - толщина нижней стороны.
  • border-left-width - толщина левой стороны.
  • inherit - применяется значение родительского элемента.

   p{ border-width: 2px,2px,1px,1px}

Примеры: [1]

      border-top-color, border-right-color, border-bottom-color, border-left-color  

Устанавливает цвет рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit - применяется значение родительского элемента.

    p { border-top-color: red}

Примеры: [1]

      border-color  

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

Значение:

  • border-top-color -цвет верхней стороны.
  • border-right-color - цвет правой стороны.
  • border-bottom-color - цвет нижней стороны.
  • border-left-color - цвет левой стороны.
  • inherit - применяется значение родительского элемента.

   p{ border-color: red, blue, red, blue}

Примеры: [1]

      border-top-style, border-right-style, border-bottom-style, border-left-style  

Устанавливает стиль рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

  • none - линия отсутствует.
  • hidden - линия тоже отсутствует, но для таблицы это значение действует по другому
  • dotted - пунктирная линия.
  • dashed - штрихпунктирная линия.
  • solid - сплошная непрерывная линия.
  • double - двойная сплошная линия.
  • groove - трехмерная борозда.
  • ridge - трехмерный гребень.
  • inset - трехмерная вырезка.
  • outset - трехмерный орнамент.
  • inherit - применяется значение родительского элемента.

    p{ border-top-style: double; }

Примеры: [1]

      border-style  

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

Значение:

  • border-top-style - стиль верхней стороны.
  • border-right-style - стиль правой стороны.
  • border-bottom-style - стиль нижней стороны.
  • border-left-style - стиль левой стороны.
  • inherit - применяется значение родительского элемента.

   p{ border-style: double, solid}

Примеры: [1]

      border-top, border-right, border-bottom, border-left  

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

Значение:

  • border-top-width - ширина верхней рамки.
  • border-top-style - стиль верхней рамки.
  • border-top-color - цвет верхней рамки.
  • inherit - применяется значение родительского элемента.

   p{border-top: 1px solid red;}

Примеры: [1]

      border  

Удобное свойство для определения рамки сразу со всех сторон элемента. Значение устанавливается одинаковыми для всех его сторон.

Значение:

  • border-width - толщина границ.
  • border-style - стиль границ.
  • border-color - цвет границ.
  • inherit - применяется значение родительского элемента.

   p{ border:1px solid red;}

Примеры: [1]

      outline-width  

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

Значение:

  • thin - граница в виде тонкой линии.
  • medium - граница в виде линии средней толщины. (по умолчанию)
  • thick - граница виде толстой линии.
  • inherit - применяется значение родительского элемента.

   body{outline-width:10px 30px 5px }

      outline-style  

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

Значение:

  • none - линия отсутствует.
  • dotted - пунктирная линия.
  • dashed - штрих-пунктирная линия.
  • solid - сплошная непрерывная линия.
  • double - двойная сплошная линия.
  • groove - трехмерная борозда.
  • ridge - трехмерный гребень.
  • inset - трехмерная вырезка.
  • outset - трехмерный орнамент.
  • inherit - применяется значение родительского элемента.

    body{ outline-style: double; }

      outline-color  

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

Значение:

  • invert - цвет границы инвертируется.
  • inherit - применяется значение родительского элемента.

   body{ outline-color:red; }

      outline  

Удобное свойство для определения общей границы. Значение устанавливается одинаковыми для всех элементов.

Значение:

  • outline-width - толщина общей границы.
  • outline-style - стиль общей границы.
  • outline-color - цвет общей границы.

   body{outline: 1px solid red}
На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой