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

Ответ 1

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

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

background:url(line.png) bottom right no-repeat;

Ответ 2

У меня есть еще одна возможность. Это, конечно, "более новая" техника, но для моих проектов достаточно.

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

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

Я надеюсь, что это тоже поможет, так как для меня это непросто.

Ответ 3

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

border-right: 1px solid;
line-height: 10px;

Ответ 4

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

Для других элементов, таких как элементы списка, вы можете управлять высотой границы с высотой строки и высотой фактического элемента с верхним краем и нижней границей.

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

Пример со списком:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

Ответ 5

Нет, вы не можете установить высоту границы.

Ответ 6

table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

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

<td class="rightborder">whatever</td>

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

Ответ 7

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

Ответ 8

.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//рисует линию справа от поля. затем добавьте верхний край и край дна. то есть.,

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

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

Ответ 9

Основываясь на ответе @ReBa выше, этот класс с custom-border работал для меня.

Модификации:

• работа с border вместо backaground-color так как background-color не согласован.
• Установка height и top свойств :after таким образом, чтобы итог доходил до 100% где значение bottom неявно.

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Ответ 10

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

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Ответ 11

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

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

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

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

демонстрация

Ответ 12

table td {
    border-right:1px solid #000;
    height: 100%;
}

Просто добавьте высоту под свойство border.