HTML and CSS: making a button as wide as its parent paragraph

Question

I have a simple HTML page with some CSS code. I am trying to make a button as wide as its parent paragraph.

The problem is that the right side of the button is not displayed correctly. I should see 1px of yellow background on the left and right side of the button. At the moment I cannot see that yellow pixel on the right side. The left side looks OK.

My browser is Mozilla Firefox 51.0.1 32-bit.

 <p style="width:200px; background-color:yellow"> <button style="box-sizing: border-box; height:24px; vertical-align:middle; text-align:center; padding-left:6px; padding-right:6px; padding-top:1px; padding-bottom:3px; border:none; margin:1px; background-color:#323B5A; font-size:11px; color:#FFFFFF; text-decoration:none; line-height:18px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:100%;">OK</button> </p> 

Answer 1

You have following styles on button:

button {
  margin: 1px;
  width: 100%;
}

So width: 100% + margin: 1px extending button 's width a bit more than 100% ie 100% + 2px actually.

To fix this, you can:

1. Remove margin: 1px from button .
2. Add left / right indents ( padding ) on p .

 <p style="width:200px; background-color:yellow; padding: 0 1px;"> <button style="box-sizing: border-box; height:24px; vertical-align:middle; text-align:center; padding-left:6px; padding-right:6px; padding-top:1px; padding-bottom:3px; border:none; background-color:#323B5A; font-size:11px; color:#FFFFFF; text-decoration:none; line-height:18px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:100%;">OK</button> </p> 

Answer 2

The margin is not being taken into account for the width. You can change the width of the button in the inline CSS to:

width: calc(100% - 2px);

Where 2px is the total size of your margin and it will work.

 <p style="width:200px; background-color:yellow"> <button style="box-sizing: border-box; height:24px; vertical-align:middle; text-align:center; padding-left:6px; padding-right:6px; padding-top:1px; padding-bottom:3px; border:none; margin:1px; background-color:#323B5A; font-size:11px; color:#FFFFFF; text-decoration:none; line-height:18px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:calc(100% - 2px);">OK</button> </p> 

Answer 3

It looks like the margin isn't being taken into consideration when the browser calculates the width.

 <p style="width:200px; background-color:yellow"> <button style="box-sizing: border-box; height:24px; vertical-align:middle; text-align:center; padding-left:6px; padding-right:6px; padding-top:1px; padding-bottom:3px; border:none; margin:1px; background-color:#323B5A; font-size:11px; color:#FFFFFF; text-decoration:none; line-height:18px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:calc(100% - 2px);">OK</button> </p> 

Answer 4

You can use margin: auto; width: calc(100% - 2px); margin: auto; width: calc(100% - 2px); and then all you have to adjust is 2px for the background border color to appear on either side at whatever width you want it.

 <p style="width:200px; background-color:yellow"> <button style="box-sizing: border-box; height:24px; vertical-align:middle; text-align:center; padding-left:6px; padding-right:6px; padding-top:1px; padding-bottom:3px; border:none; margin:auto; background-color:#323B5A; font-size:11px; color:#FFFFFF; text-decoration:none; line-height:18px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:calc(100% - 2px);">OK</button> </p> 

Answer 5

Checkout my code snippet: https://codepen.io/imcodingideas/pen/oexLyw

I removed some padding , and other properties in favor of flexbox .

p {
  width: 200px;
  background-color: yellow
}

button {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #FFFFFF;
  background-color: #323B5A;
  line-height: 18px;
  height: 24px;
  border: none;
  margin: 1px;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  width: 100%;
}

Answer 6

Take a look at the box model. https://www.paulirish.com/2012/box-sizing-border-box-ftw/

One way would be to use calc, but the other way would be to adjust your thinking site-wide so that padding and borders move in the box instead of being added to the outside like you've done on your button.

You probably shouldn't put a button in your paragraph though.

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

<section class="stuff">

  <p>
    <button class='my-button'>
      <span>My Button</span>
    </button>
  </p>

</section>

or

<section class="stuff">

  <p>
    words
  </p>

  <button class='my-button'>
    <span>My Button</span>
  </button>

</section>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

section.stuff {
  max-width: 200px;
}

section.stuff p {
  border: 1px solid red;
}

.my-button {
  display: block;
  width: 100%;
}

https://jsfiddle.net/sheriffderek/j6sqafqp/

Answer 7

Simply use

button {
width: 100%;
}