CODEWITHSUNDEEP
htmlcss
sdbbs
sdbbs

Reputation: 5384

Why are CSS horizontal margins uneven in this simple case, if specified explicitly?

Consider this simple example:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/javascript">
  </script>
  <style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  min-height: 100%;
}
.testbtnholder {
  display: block;
  border: 2px solid gray;
  width: calc(100% - 2em);
  height: calc(100% - 2.5em);
  /* margin: 0 auto; */
  margin: 0 1em;
}
  </style>
</head>

<body>
<div>Test</div>
  <div class="testbtnholder">
  </div>
</body>
</html>

Here I'd like the left and right margins to be 1 em - but for some reason, they are not equal; the below is a Firefox 50 screenshot, imported in Inkscape, where I've drawn some lines along the margins, and used the Extensions / Visualize Path / Measure Path ...:

f1a

So Firefox tells me under Computed Box Model that my margins are 16 px, but in actuality the left one is about 24 px, and the right one is about 5 px smaller than the left.

But, if I comment /* margin: 0 1em; */, and I uncomment margin: 0 auto; in the example, then for some reason, the left/right margins are equal ?!:

f2a

... however, then the Computed Box Model is not helpful at all, as it just tells me "auto" for the margins - measuring in Inkscape it turns out they're both around 21 px ?!

So, how can I specify margin-right and margin-left to an explicit number (in px, em etc), AND have them be rendered as equal - as if I've specified auto margins? EDIT: and can anyone explain why do the margins look different in my first case?

Upvotes: 3

Views: 2563

Answers (4)

Constant BOURGOIS
Constant BOURGOIS

Reputation: 69

IlyaStreltsyn is right, you just need to add box-sizing:border-box to .testbtnholder and that's it, you get 2 equals margins

.testbtnholder{
display: block;
border: 2px solid gray;
width: calc(100% - 2em);
height: calc(100% - 2.5em);
margin: 0 1em;
box-sizing: border-box;
}

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

use box-sizing property and add padding , try with this snippet

* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
html, body {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      min-height: 100%;
    }
    .testbtncontain {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      padding:2em 2.5em;
    }
    .testbtnholder {
      display: block;
      border: 2px solid gray;
      width: 100%;
      height: 100%;
      margin: 0;
      padding:0;
    }
<div>Test</div>
<div class="testbtncontain">
	<div class="testbtnholder"></div>
</div>

or you can use this snippet also decrease the width and set margin:0 auto;

html, body {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  min-height: 100%;
}
.testbtnholder {
  display: block;
  border: 2px solid gray;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  padding:0;
}
<div>Test</div>
<div class="testbtnholder"></div>

Upvotes: 1

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

I think removing the width property on .testbtnholder and just set the margin would work

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
}

.testbtnholder{
  margin: 2em;
  border: 1px solid black;
  height: 100%;
}

https://jsfiddle.net/zgvfeffr/1/

In other words: simplify your css and remove properties that you don't need

Upvotes: 1

user7250444
user7250444

Reputation:

You can have in contained inside another div and give this new div padding of your desire.

html, body {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  min-height: 100%;
}
.testbtncontain {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding:2em 2.5em;
}
.testbtnholder {
  display: block;
  border: 2px solid gray;
  width: 100%;
  height: 100%;
  margin: 0;
  padding:0;
}
<body>
<div>Test</div>
  <div class="testbtncontain">
  <div class="testbtnholder">
  </div>
    </div>
</body>

Upvotes: 3

Related Questions