Display: flex; removes white space around a button

HTML & CSS
1

For some reason, display: flex; removes white space around a button.

But I don’t know the reason why.

In this circumstance.

https://jsfiddle.net/9ht024ud/1/

.playa,
.playb,
.playc {
  display: flex;
}

    <button class="playa thePlay">
      <span class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
          <g id="play">
            <title>Play</title>
            <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
          </g>

        </svg> </span>
    </button>
2

Correct. display: flex by nature will fill the entire container width.

If you want additional white space, you’re going to need to add a margin to it.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.