Css border ширина: border-width — ширина рамки | CSS справочник

Leave a Comment / Css / By /

Содержание

box-sizing | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Применяется для изменения алгоритма расчёта ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины содержимого (width), значений margin, padding и border. Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не содержимого, а размеры блока.

Значение по умолчаниюcontent-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис 

box-sizing: content-box | border-box

Обозначения

ОписаниеПример
<тип>Указывает тип значения.
<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.
<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
border-box
Свойства width и height включают в себя значения padding и border, но не margin.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

content-box border-box

div {
  width: 400px;
  padding: 20px; 
  border: 3px dashed #c26558;
  box-sizing: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>box-sizing</title> <style> . box1 { background: #f0f0f0; /* Цвет фона */ width: 300px; /* Ширина блока */ padding: 10px; /* Поля */ border: 2px solid #000; /* Параметры рамки */ } .box2 { background: #fc0; /* Цвет фона */ width: 300px; /* Ширина блока */ padding: 10px; /* Поля */ margin-top: 10px; /* Отступ сверху */ border: 2px solid #000; /* Параметры рамки */ box-sizing: border-box; /* Ширина блока с полями */ } </style> </head> <body> <div>Ширина с учетом значения свойства width, полей и границ.</div> <div>Ширина равна значению свойства width.</div> </body> </html>

В данном примере ширина первого слоя будет равна 324 пикселя, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселей за счёт применения свойства box-sizing. Результат примера показан на рис. 1.

Рис. 1. Ширина блоков

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

Объект. style.boxSizing

Примечание

Firefox до версии 29 поддерживает свойство -moz-box-sizing.

Safari до версии 5, Chrome до версии 10, Android до версии 4 поддерживают свойство -webkit-box-sizing.

Спецификация

СпецификацияСтатус
CSS Intrinsic & Extrinsic Sizing Module Level 3Рабочий проект
CSS Basic User Interface Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

812110735.1129
12.1129935,1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Размеры

См. также

  • height
  • width
  • Вкладки на CSS
  • Открываем блочную модель
  • Размеры блока
  • Строчно-блочные элементы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

CSS width | TuHub

Общие сведения

Все элементы на веб-странице имеют прямоугольные формы и у каждого элемента есть блочная модель, которая описывает прямоугольные области для созданного элемента: область содержимого (content box), область внутренних отступов (padding box), область границ (border box), и область внешних полей (margin box). Область содержимого есть у всех элементов. Области отступов, границ и полей являются необязательными и их существование зависит от того применяете вы padding, boder или margin на элементе.

Блочная модель CSS-элемента, которая включает в себя содержимое (content box), внутренние отступы (padding box), границы (border box) и внешние отступы (margin box). 

Любые внутренние отступы добавленные к элементу будут увеличивать итоговую ширину элемента, поэтому вы не всегда можете получить ожидаемую ширину если добавите padding к вашему элементу. Элемент с width: 300px; и padding: 20px; будет отображён с шириной в 340px.

Свойство width не работает со строчными элементами, такими как <span>. Для того чтобы установить ширину у строчного элемента его нужно принудительно привести к блочному типу с помощью свойства display. Например, display: inline-block; и display: block; у строчного элемента позволят вам определить его ширину.

Синтаксис свойства

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

  • <length> —  определяет ширину элемента с использованием единиц измерения. Смотрите тип <length> чтобы увидеть полный список возможных значений.
  • <percentage> — определяет ширину элемента в процентах относительно родительского элемента. Смотрите тип <percentage> чтобы увидеть полный список возможных значений.
  • auto — браузер будет сам высчитывать и выбирать ширину элемента основываясь на его обычном потоке.
  • inherit — ширина наследуется от родительского элемента.
  • available — ширина элемента равна ширине дочернего элемента минус горизонтальные внешние отступы, границы и внутренние отступы текущего элемента.
  • max-content — внутренняя предпочтительная ширина. max-content ширина — это примерно та ширина, которую бы имел контент если бы в него не были добавлены «мягкие» переносы строк, например, параграф который бы не разбивался на несколько строк, а выглядел как одна большая строка.
  • min-content — внутренняя минимальная ширина.  min-content ширина — это примерно та ширина, которую бы имел контент, если бы он был разломан и перенесён на следующую строку во всех возможных местах. В большинстве случаев, его ширина будет зависеть от самого широкого элемента внутри него.
  • fit-content — Технически говоря, fit-content больше чем:
    • min-content
    • наименьшее из the max-content и available

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

Свойство width поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer и на Android и на iOS.

Внутренние и внешние размеры

Позволяет указывать ширину и высоту с помощью внутренних значений max-content, min-content, fit-content и stretch (ранее fill).

Intrinsic & Extrinsic Sizing

IE

9

0.09%

10

0.01%

11

0. 48%

Edge

103

0.06%

104

0.65%

105

3.41%

Firefox

103

0.14%

104

1.6%

105

0.54%

106

0.01%

Chrome

104

4.81%

105

16.6%

106

0.29%

107

0.02%

108

0.01%

Safari

15.5

0.31%

15.6

1.78%

16.0

0.18%

16.1

0.01%

Safari on iOS

15.5

1.04%

15.6

8.71%

16.0

1.91%

16.1

0.02%

Chrome for Android

105

41.23%

Полная поддержка

Частичная поддержка

С префиксом

Не поддерживается

Данные с сервиса caniuse.com

Примечание

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

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

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

Когда на элементе установлено box-sizing: border-box; ширина указанная с помощью свойства width также будет включать любые отступы добавленные к нему. 

Ключевые слова (в отличии от значений с единицами измерений и процентами) не зависят от свойства border-box, они всегда устанавливают размер области содержимого.

Отрицательные значения ширины не допустимы.

Пример

CSS3 | Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width: устанавливает ширину границы

  • border-style: задает стиль линии границы

  • border-color: устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

  • Значения в единицах измерения, таких как em, px или cm

    
border-width: 2px;

  • Одно из константных значений: thin (тонкая граница — 1px), medium (средняя по ширине — 3px), thick (толстая — 5px)

    
border-width: medium;

Свойство border-color в качестве значения принимает цвет CSS:


border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

  • none: граница отсутствует

  • solid: граница в виде обычной линии

  • dashed: штриховая линия

  • dotted: линия в виде последовательности точек

  • double: граница в виде двух параллельных линий

  • groove: граница имеет трехмерный эффект

  • inset: граница как бы вдавливается во внутрь

  • outset: аналогично inset, только граница как бы выступает наружу

  • ridge: граница также реализует трехмерный эффект

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

При необходимости мы можем определить цвет, стиль и ширину границы для каждой из сторон используя следующие свойства:


/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border:


border: ширина стиль цвет

Например:


border: 2px solid red;

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


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

Их использование аналогично:


border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

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


border-radius: 15px 30px 5px 40px;

Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:


border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:


border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

НазадСодержаниеВперед

Почему размеры блока больше заданных

При указании блоку свойств border или padding, блок становится больше заданных размеров. Используем свойство box-sizing: border-box для исправления такого поведения.

Подписаться на Telegram-канал блога

Если кратко, то просто добавляйте в начало основного css-файла следующие правила:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Абсолютно для всех элементов, включая все превдо-элементы :before и :after устанавливается свойство box-sizing: border-box;

Краткое объяснение

На изображении внизу видим разницу — верхний блок имеет по-умолчанию свойство box-sizing: content-box;, а нижнему блоку сами установили свойство box-sizing: border-box;

При box-sizing: content-box; ширина и высота задается контенту

При box-sizing: border-box; ширина и высота задается блоку

Объясню на этом же примере более развернуто.

Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px

Задаем HTML:

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!</div>

Задаем стили:

.text {
  padding: 25px;
  width: 400px;
  border: 10px solid #f7cb15;
}

Без свойства box-sizing: border-box; получаем блок шириной большего размера(470px), чем была задана(400px).

Так как свойство box-sizing по-умолчанию имеет значение content-box заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px(padding слева и справа) + 20px(border слева и справа) = 470px

Если же свойству box-sizing поставить значение border-box, то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding и border

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

Еще один пример, когда верстка ломается без указания box-sizing: border-box

Предположим, нужно сверстать блок с преимуществами, где в ряд будут располагаться по 4 блока

Задаем структуру:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>₽</div>
          <div>Plus 1</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>!</div>
          <div>Plus 2</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. repellat.</div>
        </div>
        <div>
          <div>$</div>
          <div>Plus 3</div>
          <div>Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>%</div>
          <div>Plus 4</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>#</div>
          <div>Plus 5</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Voluptate eligendi at suscipit odit iusto,</div>
        </div>
        <div>
          <div>@</div>
          <div>Plus 6</div>
          <div>Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
      </div>
    </div>
  </div>
</div>

Задаем стили:

.pluses {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 30px 0;
}
.pluses__flex {
  display: flex;
  flex-wrap: wrap;
}
.pluses-item {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.pluses-item__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #f7cb15;
  display: block;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #f7cb15;
  font-size: 24px;
}
.pluses-item__title {
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}
. pluses-item__text {
  font-size: 16px;
  text-align: center;
}

Для блока .pluses-item задаем ширину 25% и расчитываем получить по 4 блока в ряд, но при отсутствии box-sizing: border-box; получаем следующий результат:

Ширина в 25% задается контенту и добавляется еще padding, поэтому ширина блока получается 25% + padding-left + padding-right и в родительский блок .pluses__flex по 4 блока уже не помещается

Поэтому всегда использую box-sizing: border-box; для абсолютно всех элементов

В Bootstrap Reboot box-sizing: border-box; для всех элементов добавлено по-умолчанию, поэтому при верстке с нуля всегда использую Bootstrap Reboot — можно почитать статью Сброс CSS стилей Bootstrap Reboot

Также по этой теме можно почитать на https://learn.javascript.ru/box-sizing

как сделать или убрать границу?

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.

Количество значений

Результат

1

Одинаковая ширина рамок со всех сторон.

2

Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

3

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

4

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

border-width: 16px 12px 4px 8px;

border-style

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

Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.

Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:

<p>border-style: solid double dotted none</p>

border-color

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

border-color: #C85EFA;

border

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

p { border: 2px solid green; }

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left — левая.
p { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

outline-color

Определяет цвет внешнего контура.

Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.

h2 { border: solid 3px green; outline-style: solid; outline-width: 6px; outline-color: orange; }

outline

Объединяющее три предыдущих свойство, аналог border.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>outline</title>
    <style type="text/css">
    h2 {
	border: solid 3px green;
	outline: solid 6px orange;
    }
    </style>
</head>
<body>
<h2>Заголовок с внешним контуром</h2>
</body>
</html>

Результат:

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Box-модель в CSS | CSS-Tricks по-русски

Box-модель в CSS — это ключевой момент. Каждый элемент на странице определяется прямоугольником, покрывающим этот элемент. Понимание того, как это работает — основа успешной вёрстки. Давайте рассмотрим как элемент влияет на элементы, лежащие вокруг него, а также обсудим вопросы отображения различными браузерами.

В первую очередь, рассмотрим как точно рассчитывается размер элемента. Взгляните на диаграмму:

Если вы пользуетесь firebug-ом, то вы уже использовали похожую диаграмму:

Обратите внимание, что в обоих примерах внешние отступы (margin) зарисованы белым цветом. Внешние отступы уникальны тем, что они не влияют на размер самого элемента, но зато оказывают влияние на соседние, и тем самым составляют важную часть box-модели.

Размеры самого элемента рассчитываются следующим образом:

Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom

Что если значение не указаны?

Если вы используете CSS reset, то значения для внутренних отступов и границ будут нулевыми, иначе они будут равны значениям по умолчанию для используемого браузера (которое не обязательно является нулевым).

Если ширина элемента не указана (а элемент является блочным), то всё немного проще. Давайте начнём с этого, а затем перейдём к другим вопросам, которые необходимо знать о box-модели.

Ширина по умолчанию для блочных элементов.

В случае если вы не объявили ширину, а элемент имеет статичное (static) или относительное (relative) позиционирование, то ширина будет 100%, а внутренние отступы и границы будут считаться частью этой ширины. Однако если вы явно укажите ширину равной 100%, то внутренние отступы будут добавляться к основной ширине.

Смысл в том, что в этом случае ширина элемента на самом деле не 100%, а то что осталось после обработки внутренних отступов и границ. Это особенно полезно знать, поскольку существует множество случаев когда удобно либо установить ширину, либо не устанавливать её.

Самым неприятным моментом я нахожу то, что для элемента textarea, которому очень часто необходимо установить ширину, необходимо указывать атрибут col. Таким образом у нас не получится сделать его ширину равной 100%. В статической вёрстке мы, конечно можем подогнать окружающие элементы, но как поступать при плавающей разметке?

Элементы с абсолютным позиционированием

Элементы с абсолютным позиционированием, для которых ширина не установлена, ведут себя слегка странно. Их ширина устанавливается такой, чтобы только хватило покрыть контент.

Так продолжается до тех пор, пока ширина элемента не станет равной ширине родителя (ближайшего с относительным позиционированием, либо окно браузера), а затем содержимое начнёт переноситься на другую строку. Это выглядит естественно для элементов, которые увеличиваются по вертикали, для того чтобы вместить контент. Но довольно странно когда это поведение происходит горизонтально. Эта странность, на самом деле является оправданной, так как есть много причуд в том, как разные браузеры справляются с этим, не говоря уж о том, что текст рендерится по разному в разных браузерах.

Обтекаемые элементы

Такое же точно поведение наблюдается у элементов с установленным свойством float. Элементу устанавливается ширина, минимально необходимая для того чтобы вместить контент, расширяется до ширины родительского элемента (хотя относительное позиционирование уже необязательно). Из-за хрупкой природы этих «бесширинных» элементов, они практически не используются в критически важных сценариях. Если вы, например, сделали сайдбар, указав для div какой-нибудь float, и не установили ширину, то каждый элемент внутри него ответственный за размер этого сайдбара.

Строчные элементы тоже прямоугольники.

Довольно просто представить блочный элемент прямоугольником, однако строчные (inline) элементы тоже являются прямоугольниками. Достаточно представить их очень-очень длинными и тощими. Такими, что они переносятся по строкам. Они тоже могут иметь внешние и внутренние отступы и границы, как и любой другой элемент на странице.

Перенос по строкам может вводить в заблуждение. Левый внешний отступ, как показано выше, работает так, как вы себе представляли, но только в первой строке, там, где начинается прямоугольник. Внутренние отступы применились сверху и снизу текста, как это должно быть, а в местах переноса текста они игнорируются, и следующая строка начинается с позиции, указанной свойством line-height.

Особенность обработки в IE6

В Internet Explorer 6.0, при неустановленном doctype, есть одна существенная разница при расчёте размеров элементов. Если во всех браузерах под шириной подразумевается ширина контента, то в IE6 — это ширина вместе с внутренними отступами и границами. Точно также и с высотой.

Хочу увидеть всё собственными глазами

Хотите посмотреть как формируется ваша страница? Попробуйте дописать в ваш стилевой файл следующее:


* {
	border: 1px solid red !important;
}

html — Высота границы на CSS

Спросил

Изменено 3 года, 4 месяца назад

Просмотрено 401k раз

У меня есть таблица TD и справа от нее я хочу добавить границу в 1 пиксель, поэтому я сделал это:

 table td {
    граница справа: 1px сплошная #000;
}

Работает нормально, но проблема в том, что высота границы равна общей высоте TD.

Можно ли установить высоту границы?

  • html
  • css

У меня есть другая возможность. Это конечно «более новая» техника, но для моих проектов работы достаточно.

Это работает, только если вам нужна одна или две границы. Я никогда не делал этого с 4 границами… и, честно говоря, я пока не знаю ответа на этот вопрос.

 .ваш-элемент {
  положение: родственник;
}
.your-item: после {
  содержание: '';
  высота: 100%; //Вы можете изменить это, если вам нужны меньшие/большие границы
  ширина: 1 пиксель;
  положение: абсолютное;
  справа: 0;
  сверху: 0; // Если вы хотите установить меньшую высоту и центрировать ее, измените это значение
  цвет фона: #000000; // Цвет вашей границы
}

Я надеюсь, что это тоже поможет вам, как по мне, это простой обходной путь.

3

Нет, нет. Граница всегда будет такой же высоты, как элемент.

Вы можете добиться того же эффекта, заключив содержимое ячейки в и применив к нему стили высоты/границы. Или нарисовав короткую вертикальную линию в формате PNG шириной 1 пиксель, которая является правильной высотой, и применив ее в качестве фона к ячейке:

 background:url(line.png) справа внизу без повтора;

2

Да, вы можете установить высоту строки после определения границы следующим образом:

 граница справа: 1 пиксель сплошная;
высота строки: 10 пикселей;

1

Для элементов td line-height успешно позволит вам изменить размер границы высоты, как упоминал SPrince.

Для других элементов, таких как элементы списка, можно управлять высотой границы с помощью line-height и высотой самого элемента с помощью margin-top и margin-bottom.

Вот рабочий пример обоих: http://jsfiddle.net/byronj/gLcqu6mg/

Пример с элементами списка:

 li {
    стиль списка: нет;
    отступ: 0 10px;
    отображение: встроенный блок;
    граница справа: 1px сплошная #000;
    высота строки: 5px;
    поле: 20px 0;
}
<ул>
    
  • кошки
    • 
    
  • собаки
    • 
    
  • птицы
    • 
    
  • свинья!
    •

    Нет, высоту границы установить нельзя.

    Основываясь на ответе @ReBa выше, этот класс

    с пользовательской границей — это то, что сработало для меня.

    Моды:

    • работа с границей вместо цвет фона , так как цвет фона не соответствует.
    • Установка height и top свойств :после таким образом, чтобы общее значение равнялось 100% , где bottom значение равно неявный .
     ул {
  тип стиля списка: нет;
  дисплей: гибкий;
  flex-направление: строка;
}

ли {
  отступ: 10 пикселей;
}

.Пользовательская граница {
  положение: родственник;
}

.Пользовательская граница: после {
  содержание: " ";
  положение: абсолютное;
  граница слева: 1px #6c757d сплошная;
  верх: 35%;
  справа: 0;
  высота: 30%;
  верхняя граница: авто;
  нижняя граница: авто;
} 
     <ул>
  
  • 
    Привет
  
    • 
  
  • 
    Мир
  
    • 
  
  • 
    Фу
  
    • 
  
  • Бар
    • 
  
  • Баз
    •

    Удачи. ..

    0

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

     таблица {
  положение: родственник;
}
table::before { /* ::after тоже работает */
  содержание: "";
  положение: абсолютное;
  справа: 0; /* Изменить направление на другую сторону*/
  z-индекс: 100;
  ширина: 3 пикселя; /* Толщина */
  высота: 10 пикселей;
  фон: #555; /* Цвет */
}

    Вы можете установить высоту на наследует для высоты таблицы или calc(inherit - 2px) для границы на 2 пикселя меньше. Помните, что наследует , если высота таблицы не установлена.

    Используйте высоту : 50% для половины рамки.

    Demo

    Это добавит центральную границу слева от ячейки, которая составляет 80% высоты ячейки. Вы можете ознакомиться с полной документацией по пограничному изображению здесь.

     таблица тд {
    изображение границы: линейный градиент (прозрачный 10%, синий 10% 90%, прозрачность 90%) 0 0 0 1/3px;
}

    2

     таблица {
 интервал между границами: 10 пикселей 0 пикселей;
}
. rightborder {
граница справа: 1px сплошная #fff;
}

    Затем с помощью вашего кода вы можете:

     независимо

    Надеюсь, это поможет!

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

     .основной ящик{
    граница: сплошная 10px;
}
.sub-box{
    граница справа: 1px сплошная;
}

    //рисует линию с правой стороны поля. позже добавьте margin-top и margin-bottom. т. е.

     .sub-box{
    граница справа: 1px сплошная;
    поле сверху: 10px;;
    нижняя граница: 10px;
}

    Это может помочь в рисовании линии с правой стороны коробки с зазором сверху и снизу.

     таблица тд {
    граница справа: 1px сплошная #000;
    высота: 100%;
}

    Просто добавьте высоту под свойством границы.

    1

    Твой ответ

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    html — постоянная ширина границы CSS с масштабированием

    У меня есть монитор 4K с масштабированием Windows, установленным на 150%, и масштабированием Chrome, установленным на 100%. На веб-сайте, который я разрабатываю с помощью Bootstrap 4.5.2, это приводит к тому, что Chrome отображает границы таблицы с непостоянной толщиной. Обратите внимание, что на следующем снимке экрана есть две группы из 4 линий, которые толще остальных (возможно, вам потребуется увеличить изображение):

    Вот небольшой пример, воспроизводящий проблему в Chrome 95.0.4638.69. Это можно воспроизвести с масштабом, установленным на 150%, либо в Chrome, либо в настройках дисплея Windows.

     

    <голова>
        Раздражающие границы
        
    
    <тело>
        <таблица>
            
                лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум
            лорем ипсумлорем ипсумлорем ипсумлорем ипсумлорем ипсум

    Насколько я понимаю, это связано с ошибкой округления, когда расчетная толщина границы находится где-то между 1 и 2 пикселями, поэтому иногда Chrome показывает 1 пиксель, а иногда 2 пикселя. Прежде чем спросить, я поискал и нашел предложенный обходной путь с использованием 0,01 пикселя для толщины границы. Это работает, но на самом деле не устраняет основную причину и, по-видимому, может привести к тому, что граница вообще не будет отображаться в некоторых браузерах.

    Когда я проверяю HTML для таких сайтов, как Stack Overflow или GitHub, они используют 1 пиксель для ширины границ своих div, так же, как и я, но их границы всегда согласованы. Например, посмотрите на границы между вопросами в Stack Overflow или на границы между файлами в браузере репозиториев GitHub). Масштабирование влияет на ширину границы на этих сайтах; если я увеличу масштаб, граница вырастет, например, до 2 пикселей, но все границы будут расти последовательно. Я довольно долго копался в их CSS, но не могу понять, как они это сделали. Я пропустил какую-то волшебную настройку CSS, которая решает эту проблему? Или границы div и ячеек таблицы ведут себя принципиально по-разному?

    • HTML
    • CSS
    • Google Chrome

    13

    Скорее всего, это ошибка браузера Chrome, поскольку браузер Firefox обрабатывает/отображает ее надлежащим образом.

    Вы можете сообщить об ошибке команде Chrome, используя эту ссылку для сообщения об ошибке

    Рассмотрите возможность создания медиа-запроса для огромных экранов (например, более 2 КБ будут иметь разные размеры границ).

     @экран мультимедиа и (минимальная ширина: 2560 пикселей) {
  стол, стол * {
    граница: сплошная черная 1px !важно;
  }
  /* или же */
  * {
    граница: сплошная черная 1px !важно;
  }
}

    Вы можете изменить минимальную ширину по своему вкусу. Кроме того, лучше не использовать !important и указать одну дополнительную спецификацию (класс, имя тега).

    1

    Твой ответ

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Учебное пособие по границам CSS с примерами

    Следите за нами на наших фан-страницах, чтобы получать уведомления каждый раз, когда появляются новые статьи. Фейсбук Твиттер

    1- Обзор границы CSS

    Свойство  Граница CSS используется для установки границы элемента, а именно ширины, стиля и цвета границы.

    Самый простой синтаксис для установки границы элемента:

    граница: ширина границы стиль границы цвет границы;
/* Пример: */
граница: 40px сплошной светло-серый;

    Пример:

    <дел>
    Это div 
    
    граница: 40px сплошной светло-серый;

    ширина границы Дополнительно; значение по умолчанию: средний .
    бордюрный Обязательный.
    цвет рамки Дополнительно; его значение по умолчанию зависит от графической среды пользователя
    <дел>
    3 значения (border-width, border-style, border-color):
    
    граница: 1 пикс.  сплошная светло-серая;
    <дел> 2 значения (стиль границы, цвет границы):

    граница: сплошная светло-серая;

    <дел> 1 значения (стиль границы):

    граница: сплошная;