edge an object that doesn’t exist

Question

Hello!

I’d like to put an edge on my counter. The problem is that my counter is based on the case numbers of json, so the numbers in html do not exist.

Is there any way to edge the div that has no content?

document.getElementById("contadorprincipal").innerHTML = arrayResultados.length;

.contadorprincipalcapa {
    color: white;
    font-size: 15px;
    margin: 10px;
}

<div class="contadorprincipalcapa">
    <div id="contadorprincipal"></div>
</div>

Answer 1

You need to add a content, a padding or set a fixed/minimum size to the div. In this case I added a height minimum:

document.getElementById("contadorprincipal").innerHTML = "50" //arrayResultados.length;

.contadorprincipalcapa {
    color: white;
    font-size: 15px;
    margin: 10px;
    min-height: 1em; /* 2em = 2 vezes o tamanho da fonte */
    border: 1px solid #000;
    background: #000
}

<div class="contadorprincipalcapa">
    <div id="contadorprincipal"></div>
</div>