Whitespace causing divs to stack in Pure CSS [duplicate]

This question already has an answer here:

How do I remove the space between inline-block elements? 39 answers

I'm using Pure CSS to layout a site, and I've run into an issue. If there's any whitespace between nested grid elements, it breaks the layout and pushes the last div onto the next line. I created a test website with as little in it as possible to test if it was just me, and I'm still running into the problem.

<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  </head>
  <body>
    <div class="pure-g">
      <div class="pure-u-1-2">
        <div class="pure-u-1-3">
          <p>Hello world</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hello</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hey there</p>
        </div>
      </div>
      <div class="pure-u-1-2">
        <p>Hi :)</p>
      </div>
    </div>
  </body>
</html>

This code results in this:

If I take the whitespace out from between the divs, as in

<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>

it fixes itself:

This issue is occurring in both Chrome and Firefox. Is this an issue with Pure CSS, or am I doing something horribly wrong?

EDIT: I found a solution specific to YUI Pure CSS. To nest layouts, each set of columns needs to be in its own .pure-g div. I put this in more detail on the Github issue.

This is true for inline-block elements. Comment them out:

<div class="pure-u-1-2"><!--
    --><div class="pure-u-1-3"><p>Hello world</p></div><!--
    --><div class="pure-u-1-3"><p>Hello</p></div><!--
    --><div class="pure-u-1-3"><p>Hey there</p></div>
</div>

Len Paulsen

This previous thread on the subject should be of interest to you. Please follow this link, as this has been extensively tested and discussed HERE.

Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.

sine css is dividing the with pure-u-1-3- 33.333% for one item and if we put three in a box( pure-u-1-2) its full , so no space for whitespace..

So if you put white space the last div goes down because of lack of space.

display: inline-block will always keep the whitespace between your elements if there is any. There are several hacks to get rid of the whitespace between the elements. You can find some good ones here. I personally think the font-size: 0pxhack works best, though it can be a hassle if you're working with EM's

What I really would suggest though would be to use float:left instead of display: inline-block. This way you can avoid having to use any dirty hacks to make it work.

来源：https://stackoverflow.com/questions/23927890/whitespace-causing-divs-to-stack-in-pure-css

标签

html

css

yui-pure-css