I enter a value in a div and it moves

Question

Hello, I got this style sheet:

   #contentor {
        width:315px;
        margin: 0 auto;
    }

     div.linha div {
        width: 100px;
        height: 100px;
        margin:0px;
        padding:0px;
        border: 1px solid black;
        display: inline-block;
        font-size:32px;
        text-align: center;
        line-height: 100px;
    }

    h1 {
        text-align: center;
    }

And this script:

    var corFundo = "red";

    function mudarFundo00() {
        c00.style.backgroundColor = corFundo;
        corFundo = "yellow";
        c00.innerHTML = "X";
    }


    var c00 = document.getElementById('c00');
    c00.addEventListener('click', mudarFundo00);

Before you click I have this:

When I click I get this:

Can someone explain to me the reason for this displacement and how to leave the div at starting position?

Thank you very much!

Answer 1

to solve you only need to put the "vertical-align:top" property in "div.line div {" to align the div.

<style>
		#contentor {
			width:315px;
			margin: 0 auto;
		}
	
		 div.linha div {
			width: 100px;
			height: 100px;
			margin:0px;
			padding:0px;
			border: 1px solid black;
			display: inline-block;
			font-size:32px;
			text-align: center;
			line-height: 100px;
			vertical-align:top;
		}
	
		h1 {
			text-align: center;
		}
	</style>

<div id="contentor">
    	<div class="linha">
        	<div id="c00"></div>
            <div></div>
            <div></div>
        </div>
    </div>
    
    <script>
		var corFundo = "red";

		function mudarFundo00() {
			c00.style.backgroundColor = corFundo;
			corFundo = "yellow";
			c00.innerHTML = "X";
		}
	
	
		var c00 = document.getElementById('c00');
		c00.addEventListener('click', mudarFundo00);
    
    c00.click();
	</script>

Answer 2

Hello, welcome to Sopt, the problem is basically your line-height, when you put element X, it misaligned... the correct value would be: line-height: 182px;not to misalign but then your x, would not be centralized, the solution in this case would be to do the following:

div.linha div {
        width: 100px;
        height: 100px;
        margin:0px;
        padding:0px;
        border: 1px solid black;
        display: inline-block;
        font-size:32px;
        text-align: center;
        line-height: 105px;
        vertical-align: middle;
    }

Example fiddle.