Откуда у кнопки выравнивание?

Question

[gifon]

Здравствуйте,
почему красный квадратик не в начал зеленого, а где-то после середины
https://jsfiddle.net/ct6d9hp3/

<button>
    <div>
      <span></span>
    </div>
  </button>

div {
  height: 100px;
  width: 100px;
  background: green;
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
}

Answer 1

[вовчек]

div {
  height: 100px;
  width: 100px;
  background: green;

  display: flex;
}

Или:

div {
  height: 100px;
  width: 100px;
  background: green;

  position: relative;
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
	
	  top: 0;
	  left: 0;
		right: 0;
		bottom: 0;
}

Comments

[gifon]

Но почему flex решает все проблемы)

[вовчек]

gifon, по поводу вопроса: но почему? Ответ точный дать не смогу, но почему то это возникает именно после того как вы оборачиваете элементы в кнопку.

Answer 2

[Rst0]

div наследует от button text align: center и не имеет position: relative
внутренний span имеет position: absolute, но не заданы отступы.
юзер-агент в этoм случае для начальной точки опирается на text align = center = 50px (ширина div 100px)