0

I'm trying to lay out my page precisely by specifying CSS attribute values in pixels. However, in one instance where I'm trying to limit the maximum number of tiles per row in a tiled display, I'm finding that my calculations are off by a puzzling, unknown (to me) factor.

The following two fiddles illustrate my question:

  • Good fiddle: A max of two tiles are displayed per row in the left column. But I don't understand why the max-width attribute of my container has to be greater than the sum of margin + border + padding + width for the content tiles.
  • Bad fiddle: I'm not getting the 2-tiles-per-row output I want, despite specifying what I believe to be precisely calculated box model attributes for the content and container elements.

What am I missing in my calculations? Why is margin + border + padding + width for the inner tiles not adding up exactly to my max-width for the container?

Marty C.
  • 576
  • 2
  • 7
  • 22

1 Answers1

0

It is a natural thing in HTML, that it puts some space between the elements as it does with words. You can change your html code (the part with 'col-1-tile') so it looks like this:

<div class="inline-block col-1-tile">A</div><div class="inline-block col-1-tile">B</div><div class="inline-block col-1-tile">C</div>

Or you can try to change font-size of those elements to 0px. Both will do the trick. More on that topic here or here

Community
  • 1
  • 1
Michal Stassel
  • 68
  • 6
  • EDIT: it doesn't put the space everywhere, but obviously 'inline-block' is one of those elements, where it does. It is known under term "whitespace dependent method". – Michal Stassel Aug 21 '14 at 21:08