¿Cómo controlar la altura del borde?

Question

Tengo dos div, uno a la izquierda y el otro a la derecha. Ahora quiero dividir estos dos div con un borde entre ellos. Pero el borde con altura completa se ve mal.

Quiero controlar la altura del borde. ¿Cómo podría hacer esto?

Answer 1

Un borde siempre estará a la longitud completa de la caja contenedora (la altura del elemento más su relleno), no se puede controlar excepto para ajustar la altura del elemento al que se aplica. Si todo lo que necesita es un divisor vertical, que podría uso:

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

con CSS:

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

Demo at JS Fiddle, ajuste la altura de la span.container para ajustar la 'altura' frontera.

o, para usar pseudo-elementos (::before o ::after), dada la siguiente HTML:

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

La siguiente CSS añade un pseudo-elemento antes de cualquier elemento div que es el hermano adyacente de otro elemento 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.

Answer 2

Quiero controlar la altura del borde. ¿Cómo podría hacer esto?

No puede. Los bordes de CSS siempre abarcarán el alto/ancho completo del elemento.

Una idea alternativa sería utilizar el posicionamiento absoluto (que puede aceptar valores porcentuales) para colocar el elemento portador del borde dentro de uno de los dos divs. Para eso, tendrías que hacer el elemento position: relative.

Answer 3

Se puede crear una imagen de lo que sea la altura que desee y, a continuación, la posición que con el fondo CSS (-Posición) propiedad como:

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

En lugar de center top también se puede utilizar píxeles o como 50% 100px%.

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

Answer 4

no está mal .. pero prueba este ... (en caso de que funciona para todos, pero solo ist -webkit incluido)

<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; 
"> 

// No dude en editar y añadir el resto de navegador ..

Answer 5

Sólo usando line-height

line-height: 10px; 

Answer 6

Estaba buscando este ...Al usar la respuesta de David, utilicé un tramo y le di un relleno (la altura no funcionará + el problema del margen superior) ... Funciona como un amuleto;

Ver 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; 
}