Why, if elements are given a table-cell and a width of 1%, do they divide the entire width of the parent among themselves? And why, when reducing the size of the window on the first element, there appears an incomprehensible padding, which shifts it down?

.nav { list-style: none; border: 1px solid #eaeaea; height: 60px; box-sizing: border-box; padding: 0; margin: 0; } .nav__item { display: table-cell; width: 1%; } .nav__item:not(:last-child) { border-right: 1px solid #eaeaea; } .nav__item-link { width: 100%; height: 60px; display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; box-sizing: border-box; } 
 <ul class="nav"> <li class="nav__item"><a href="#" class="nav__item-link">Link 1 222222</a></li> <li class="nav__item"><a href="#" class="nav__item-link">Link 2</a></li> <li class="nav__item"><a href="#" class="nav__item-link">Link 3</a></li> <li class="nav__item"><a href="#" class="nav__item-link">Link 4</a></li> <li class="nav__item"><a href="#" class="nav__item-link">Link 5</a></li> </ul>

    1 answer 1

    1. Because all the table cells that belong to one row of the table occupy, IN SUM, the entire width of this row. In this case, the parent.

    2. Because the following happens:

      1. The contents of the cell (the first element) is transferred to the second row.
      2. The height of the first element increases and this causes the height of neighboring cells to increase.
      3. "Incomprehensible padding" implicitly adds a browser to cells that get the size larger than originally specified.
      4. The downward shift is due to the fact that vertical-align by default = baseline and the contents of ALL cells are aligned relative to each other along the baseline - the lower edge of the letters of the text of the first line without regard to the callouts.

    Put the style of vertical-align:middle , for example, see for yourself what's what.

    • Why do they share the width of the parent if you give them a width of 1%, if you remove this property they occupy as an inline-block? - E_K pm
    • Because so renders the table browser. if you set ALL cells the same width, the browser will try to render as I said above, then expanding the cells in proportion to the content. And if the width is not set, then yes, it will be like an inline block, because the above construction is not a complete table. If you make a normal table, its cells will take up the entire width of the table, even if you do not specify anything for them. And the width of the cells will be proportional to the content. - Inquisitor