Why this behavior when I add margin and width to a button on css?

Question

When I use margin: 10px with width: 100% it gives me the button more bigger that the screen, and the only solution is removing the margin but I need it. This is a simple demo to demonstrate my problem. This is breaking my look and feel of my app.

You can see in this link https://www.w3schools.com/code/tryit.asp?filename=G7HZARR1F6M7 what I am trying to do and the weird behavior that I receive.

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
}

.without-margin {
  margin: 0px;
}

.with-margin {
  margin: 10px;
}

<div>
  <button class="button without-margin">What I want but adding margin</button>
  <button class="button with-margin">What I receive putting some margin</button>
</div>

The first one just uses padding. You should research padding versus margin. — Michelangelo, Aug 30 '19 at 12:31
Go read up on the basics of the CSS Box Model. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model — misorude, Aug 30 '19 at 12:31
Instead of margin on the button, add padding to the container and it will work as you want it to — StudioTime, Aug 30 '19 at 12:32

score 1 · Accepted Answer · answered Aug 30 '19 at 12:30

1

Because the total "width" is being 100% + 20px (10px each side).
One way to fix it is using calc() for width:

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: calc(100% - 20px); /* 100% subtracting horizontal margin */
}

answered Aug 30 '19 at 12:30

Azametzin

5,223
12
28
46

I totally forgot this... sorry for the dummy question, and thanks for the faster answer. – Joao Pixeles Aug 30 '19 at 12:34
It's all right. It happens to me all the time. – Azametzin Aug 30 '19 at 12:36

score 0 · Answer 2 · answered Aug 30 '19 at 12:31

0

Try using padding instead, the below code will give your desired output.

.with-margin {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

answered Aug 30 '19 at 12:31

j9070749

815
2
11
22

Why this behavior when I add margin and width to a button on css?

2 Answers2