CODEWITHSUNDEEP
htmlcss
Anil
Anil

Reputation: 553

Borders still visible on overlapping elements on CSS

I am trying to adjust the 2 divs inside one another. The outer div has height of 100mm, and the inner div has height of 80mm with 10mm outline. But the result is that i see the background color of the outer div on a very tine area outside the innerdiv.

I am trying to find out why the inner div cannot cover the whole area?

body {
  background-color: #DDDDDD;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.outerdiv {
  width: 100mm;
  height: 100mm;
  padding: 10mm;/* VAR1 */
  margin: 10mm auto;
  background: red;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.innerdiv {
  height: 80mm;
  outline: 10mm #FFEAEA solid; /* VAR1 */
  background: #b3d4fc;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<body>
  <div class="outerdiv">
    <div class="innerdiv">This is a text.</div>
  </div>
</body>

Upvotes: 0

Views: 69

Answers (1)

michael.johnson037977
michael.johnson037977

Reputation: 11

If you search and replace your mm and replace them px, you'll have it displayed correctly. To put it roughly, this is because when content is drawn to a screen, it is converted to pixels and rendered accordingly. Sounds fine, but the issue is pixel sizes are contingent of the dpi of the device. And there's no way to encompass all the different dpi of respective device screens. So there isn't a stable formula to reliably scale mm to px and have it look consistent on all devices, since javascript doesn't take dpi into account. The overlap is most likely due to the fact that pixel size is dependent on the screen resolution.

It's better to just use pixels in your hard css. Scaled the units before, or you won't be sure how it renders on varying screen dpi.

Upvotes: 1

Related Questions