Entonces, en este violín, reduje el ejemplo al mínimo:
.wrapper { display: flex; } .mybutton { height: 4em; width: 4em; } .mytextarea { height: 8em; resize: none; } ``` <div class="wrapper"> <div class="buttonWrapper"> <div class="buttonRow1"> <button class="mybutton"> 1 </button> </div> <div class="buttonRow2"> <button class="mybutton"> 2 </button> </div> </div> <textarea class="mytextarea"></textarea> </div>Pregunta simple: ¿por qué el área de texto es más grande (altura) que los botones? Los botones tienen una altura de 4 em cada uno y el área de texto de 8 em.
Son 8 em != 2x4em ???
Sé que hay otras formas de hacer que el área de texto tenga exactamente la misma altura que los botones en este ejemplo específico, estoy desconcertado por este comportamiento en este momento.
button y textarea tienen valores diferentes por defecto (para relleno, borde...), y dado que la forma predeterminada es agregar relleno y borde a la altura de los elementos, obtienes lo que ves. Sin embargo, puede configurar box-sizing:border-box para cambiar este comportamiento.
Además, la unidad
emes relativa al tamaño de fuente de un elemento. Entonces, si cambia más tarde el tamaño de fuente delbuttono del área detextarea, es posible que obtenga un resultado diferente.
*{ box-sizing:border-box; } .wrapper { display: flex; } .mybutton { height: 4em; width: 4em; } .mytextarea { height: 8em; resize: none; } <div class="wrapper"> <div class="buttonWrapper"> <div class="buttonRow1"> <button class="mybutton"> 1 </button> </div> <div class="buttonRow2"> <button class="mybutton"> 2 </button> </div> </div> <textarea class="mytextarea"></textarea> </div>El área de texto comienza con un borde y relleno básico, lo que los convierte en ninguno en lugar de los predeterminados. Solucionará este problema