如何控制边框高度？

Question

我有两个div,一个在左边,另一个在右边.现在我想将这两个div除以它们之间的边界.但是全高的边界看起来很糟糕.

我想控制边框的高度.我怎么能这样做？

Answer 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小提琴演示.

Answer 2

只使用 line-height

line-height: 10px;