Rectangles Instead of Whitespace in Chrome

Rectangles instead of whitespace in Chrome

Turns out the typeface didn't define the Unicode whitespace character (0020). All the other browsers substituted the missing character for whitespace, except Chrome. Fixed by editing the font and adding the character.

Windows OS displaying unknown character vertical rectangles in browsers

That is a character that your font doesn't know how to render properly. Try to copy and paste it into google, and see what it says it is. Chances are it is safe to remove it, try retyping that bit of information WITHOUT copying and pasting. Else, try a different font and see if it is still there. See this for more; specifically: The replacement character � (often a black diamond with a white question mark or an empty square box) is a symbol found in the Unicode standard at codepoint U+FFFD in the Specials table. (Bold Added)

Remove white space above and below large text in an inline-block element

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    BIG TEXT
</span>

White space between image and td when zooming in or out in the browser

While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.

One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.

Another solution could be to use background images instead of <img> tags as @user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.

Why is there whitespace / overlap between rect elements where there shouldn't be?

That's antialiasing. Add style="shape-rendering: crispEdges" to the <div> elements and it will go away. You could add it to the shapes themselves instead if you want either as an attribute or a style.

The other thing to do is to add 0.5 to the y co-ordinates of your shapes There's more information about why that works here

---

Related Topics