Why display:block on button doesn't make the button full width of the container?

Question

Why does a button with a display: block doesn't take the full width of the container? The following code makes the button takes only the width of the content.

MDN definition of block elements:

"A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)."

 &__actions {
      width:800px;

      .btn-primary {
        display: block;
        background-color: #382AE1;
        color: white;
        padding: 15px 4px;
        border-radius: 11px;
      }
    }
  }

Codepen: https://codepen.io/rihamkharoub/pen/eYGBLOE

Could you provide an example on CodePen or somewhere similar? — PyrettaBlaze, Dec 13 '21 at 09:37
Please put a working snippet direct into your question rather than on another site. See https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Dec 13 '21 at 09:43
@rihankh External code is only acceptable if all relevant code is right in the question itself as well. — connexo, Dec 13 '21 at 10:22

BeanBoy · Answer 1 · 2021-12-13T10:16:52.797

-3

You need to set the button widht: 100%. Now it can stretch the whole width of the parent element.

div {
  width: 600px;
  height: 80px;
  background: blue;
}
button {
  display: block;
  background: red;
  width: 100%;
}

<html>

<head>

</head>

<body>
  <div>
    <button class="btn-primary">BTN CONTENT</button>
  </div>
</body>

</html>

Like this!

edited Dec 13 '21 at 10:16

answered Dec 13 '21 at 09:45

BeanBoy

326
2
10

2

OP didn't ask for a fix. Check the question, how does code only answer any question starting with *Why...*? – connexo Dec 13 '21 at 10:14

Why display:block on button doesn't make the button full width of the container?

1 Answers1