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

user_17663775 0
Viewed 219

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

display sass css html
1 Answers

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!

user_171488350
Related