Как контролировать высоту границы?

Ответ 1

Граница всегда будет на всей длине содержащего окна (высота элемента плюс его отступы), он не может управляться, кроме как регулировать высоту элемента, к которому он применяется. Если вам нужен только вертикальный делитель, вы можете использовать:

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

С помощью css:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

Демо в JS Fiddle, отрегулируйте высоту span.container, чтобы отрегулировать высоту границы.

Или, чтобы использовать псевдоэлементы (::before или ::after), учитывая следующий HTML:

<div id="left">content</div>
<div id="right">content</div>

Следующий CSS добавляет псевдоэлемент перед любым элементом div, который соседний брат другого элемента div:

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS Fiddle demo.

Ответ 2

Только используя line-height

line-height: 10px;

Ответ 3

неплохо.. но попробуйте этот... (должен работать для всех, кроме ist just -webkit)

<br>
<input type="text" style="
  background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">

//Не стесняйтесь редактировать и добавлять все другие браузеры.

Ответ 4

Я просто искал это... Пользуясь ответом Дэвида, я использовал пролет и дал ему некоторое дополнение (высота не будет работать + проблема с верхним маржем)... Работает как шарм;

См. fiddle

<ul>
  <li><a href="index.php">Home</a></li><span class="divider"></span>
  <li><a href="about.php">About Us</a></li><span class="divider"></span>
  <li><a href="#">Events</a></li><span class="divider"></span>
  <li><a href="#">Forum</a></li><span class="divider"></span>
  <li><a href="#">Contact</a></li>
</ul>

.divider {
    border-left: 1px solid #8e1537;
    padding: 29px 0 24px 0;
}

Ответ 5

Я хочу контролировать высоту границы. Как я могу это сделать?

Вы не можете. Границы CSS всегда будут охватывать всю высоту/ширину элемента.

Одна обходная идея - использовать абсолютное позиционирование (которое может принимать процентные значения), чтобы поместить пограничный элемент внутри одного из двух div. Для этого вам нужно будет сделать элемент position: relative.

Ответ 6

Вы можете создать изображение любой высоты, которую хотите, а затем поместить это с помощью свойства background (-position) CSS, например:

#somid { background: url(path/to/img.png) no-repeat center top;

Вместо center top вы также можете использовать пиксель или%, как 50% 100px.

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position