html - w3schools - Altura del borde en CSS

html www3

Question

Tengo una TD de tabla y, a la derecha, quiero agregar un borde de 1 píxel, así que hice esto:

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

Funciona bien, pero el problema es que la altura del borde toma la altura total del TD.

¿Hay alguna manera de establecer la altura del borde?

Answer 1

Actualmente, no, no sin recurrir al engaño. se supone que los bordes de los elementos se extienden por toda la longitud del lado del cuadro de elementos al que se aplican.

Answer 2

No, no hay. El borde siempre será tan alto como el elemento.

Puede lograr el mismo efecto envolviendo los contenidos de la celda en un <span> y aplicando estilos de altura / borde a eso. O dibujando una línea vertical corta en un PNG de 1 píxel de ancho, que es la altura correcta, y aplicándola como fondo de la celda:

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

Answer 3

No, no puedes establecer la altura del borde.

Answer 4

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

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

Luego, con tu código puedes:

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

¡Espero que ayude!

Answer 5

Para los elementos td, la altura de la línea le permitirá cambiar el tamaño de la altura del borde como se mencionó en SPrince.

Para otros elementos, como los elementos de la lista, puede controlar la altura del borde con la altura de la línea y la altura del elemento real con margen superior e inferior del margen.

Aquí hay un ejemplo de trabajo de ambos: http://jsfiddle.net/byronj/gLcqu6mg/

Un ejemplo con elementos de la lista:

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>

Answer 6

Tengo otra posibilidad. Esta es, por supuesto, una técnica "más nueva", pero para mis proyectos funciona suficiente.

Solo funciona si necesita uno o dos bordes. Nunca lo hice con 4 fronteras ... y para ser sincero, todavía no sé la respuesta para eso.

.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
}

Espero que esto también te ayude, ya que para mí, esta es una solución fácil.

Answer 7

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

Solo agrega altura debajo de la propiedad del borde.

Answer 8

Sí, puede establecer la altura de la línea después de definir el borde de esta manera:

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

Answer 9

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

// dibuja una línea en el lado derecho de la caja. luego agrega un margen superior y un margen inferior. es decir,

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

Esto podría ayudar a dibujar una línea en el lado derecho de la caja con un espacio en la parte superior e inferior.