Quisiera saber si es posible mediante css
establecer el alto de un interno tomando en cuenta el valor del alto del padre ya que realice aparte varios media queries (tamaño de pantalla de celular, y tamaño de pantalla de tablet) y en ellos voy a darle estilo a una etiqueta p, precisamente modificar el font-size
Lo que tengo en el html es:
<div class="contador-icono">
<i class="icon-basket"></i>
<div class="box-cont">
<p id="cont">0</p>
</div>
</div>
No establecí una altura específica al contenedor padre pero el contenedor que lo contiene tiene un ``line-height: 2.125em`` el cual cambia su valor para la visualización en celular.
Lo que deseo alcanzar es que la ``<div class="box-cont">`` sea un círculo pequeño que se ubique en la parte superior derecha y que el <p> sea de 0.6250em. Ya cambie el font size y también ya le dí un border-radius. Aún me falta que el <p> este en el centro del círculo (que se centre en el eje x como en el eje y).
en el css tengo:
.contador-icono { display: flex; position: relative; } .contador-icono .box-cont { position: absolute; top: 2px; background-color: #FFF; height: 14px; padding: 2px; border-radius: 50%; z-index: 100; } #cont { font-size: 0.6250em; }
Estoy leyendo sobre ``calc()`` porque creo que me va a servir aunque sea para un futuro y que la posible solución lo va a utilizar.