CSS table table size - conterintuitive behavior

Question

Look at the following two images:

Enabling or disabling the table-cell attribute excludes width and height information. In fact, I already turned off the browser, but reusing them doesn’t change anything.

Use display:table-cellis the only way to use vertical-alignto center some text inside a container.

But then it becomes difficult to play with the width of the yellow div element. What for? (I’m also interested .. if some property becomes ineffective for any element, when some others are turned on, the browser can mark them with a different color or cross them out .. Or will there be some drawbacks?)

.grey-footer-background {
  background-color: #a8a7a5;
  height: 70px;
  border-bottom: 1px black solid;
  padding-top: 8px;
  display: table;
  height: 100px;
  width: 100%;
  table-layout: fixed;
}
.gold_button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
  text-align: center;
  border-right: solid 1px #262626;
  width: 80%;
  height: 60px;
  vertical-align: middle !important;
  border: 1px solid black;
  margin: 0 auto;
  display: table-cell;
}

<div class="grey-footer-background">
  <div class="gold_button"><span>Email</span>
  </div>
</div>

Run codeHide result

Answer 1

display:table-cell , div display:table-row display:table, "", . .gold_button span

.grey-footer-background {
    background-color: #a8a7a5;
    border-bottom: 1px black solid;
    padding: 10px 0;
    width: 100%;
}
.gold_button {
    display: table;
    table-layout: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    text-align: center;
    border-right: solid 1px #262626;
    width: 80%;
    border: 1px solid black;
    margin: 0 auto;
    background-color:gold;
}
.gold_button span {
    display: table-cell;
    vertical-align: middle !important;
    height: 60px;
}

<div class="grey-footer-background">
  <div class="gold_button">
    <span>Email</span>
  </div>
</div>

Hide result

Answer 2

, ? (JSFiddle)

:

line-height: desired height

.