Почему Выпадает div после добавления содержимого?

пишу крестики-нолики.
есть один родовой элемент div, в котором 9 других дивов в 3 ряда.
По логике я делаю крестик добавлением текстового символа "Х" в див.
После чего вся конструкция ломается. Как пофиксить?
Код такой

<style>
    *{
        padding:0;
        margin:0;
    }
    #field{
        width:310px;
        height:300px;
        margin:50px auto;
    }
    #field div{
        width:100px;
        height:100px;
        background:orange;
        border:1px solid black;
        display:inline-block;
        box-sizing: border-box;
    }
</style>

<div id="field">
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</div>