0

Here is the codepen I created to demonstrate the problem. 

.blt-header {
  background-color: yellow;
  height: 204px;
  color: green;
  font-size: 30px;
}
<div class="blt-header">
  This is blt-header Why height is 408px when I specify it to be 204px?
</div>

Can you please help me find out why the height is wrong? Twice as I specified.

Here is a picture:

enter image description here

j08691
  • 204,283
  • 31
  • 260
  • 272
Nicolas S.Xu
  • 13,794
  • 31
  • 84
  • 129
  • 2
    Showing as 204px in chrome inspector for me.... – CalvT Jun 07 '16 at 16:44
  • 2
    Do you have your system-level zoom set to 200% (e.g. using a 4K monitor)? (Based on resolution of your screenshot, that's exactly the case.) – Marat Tanalin Jun 07 '16 at 16:45
  • What are you using to measure that? A screenshot software? Use Chrome inspector to check your sizes. I'd say its your monitor like @MaratTanalin said – CalvT Jun 07 '16 at 16:47
  • The zoom of my chrome is 100%. Same thing on Safari. Is is because I am using retina display? – Nicolas S.Xu Jun 07 '16 at 16:47
  • 1
    > "Is is because I am using retina display?" Exactly. CSS pixels are not the same as physical pixels. The size of CSS pixels directly depends on system-level zoom. – Marat Tanalin Jun 07 '16 at 16:48
  • @CalvT The software is xScope – Nicolas S.Xu Jun 07 '16 at 16:48
  • @CalvT How do I reset the retina display to the same as measured pixel by xScope? – Nicolas S.Xu Jun 07 '16 at 16:50
  • You probably wouldn't wish that since then everything on the screen would be 4x smaller and most likely totally unusable. Why would you wish CSS pixel to be equal to physical pixel in the first place? – Marat Tanalin Jun 07 '16 at 16:51
  • 2
    I suggest you read this [Pixel density, retina display and font-size in CSS](http://stackoverflow.com/questions/12058574/pixel-density-retina-display-and-font-size-in-css) which may help you understand – CalvT Jun 07 '16 at 16:53
  • @CalvT I didn't want measured pixel to be physical pixel. I just like the size to be the same. – Nicolas S.Xu Jun 07 '16 at 16:55
  • @CalvT Thanks! The tool I use (xScope) is measuring the screen pixel. On retina display, screen pixel is double of css pixel. – Nicolas S.Xu Jun 07 '16 at 17:07

0 Answers0