Adding space between units

[Kevin A. Cameron]

What's the proper way to add space between elements?

<ul class="line">
  <li class="unit size1of2"><a class="lod pas mrs mbs block" href="#"><img width="135px" src="#" class="none">port item</a></li>
  <li class="unit size1of2 lastUnit"><a class="lod pas mbs block" href="#"><img width="135px" src="#" class="none">port item</a></li>
  <li class="unit size1of2"><a class="lod pas mrs mbs block" href="#"><img width="135px" src="#" class="none">port item</a></li>
  <li class="unit size1of2 lastUnit"><a class="lod pas mbs block" href="#"><img width="135px" src="#" class="none">port item</a></li>
</ul>

(.lod class is for light on dark - adds bg/font color.)

How would you add space between these elements (for a tiled thumbnail look)?

When adding right margin to every odd element in the unit, the widths of the elements are not uniform.
To have all the anchors look the same width they would all need right margin, but then these thumbnails would not align with the elements below.

In the grids demo all (text) elements in a unit have left and right margin. How do you handle images in this situation? Give them l&r margin as well?

Kevin

[erik.f...@googlemail.com]

Hi Kevin,

I think what you are doing is a good example of taking the grid system
too far. If you are trying to make something like an image gallery
with thumbnails, I would suggest not to use the grid system. What you
are trying to build is actually a CSS lego piece on its own, so it
should not have to rely on the grids. Furthermore, keep in mind that
using .lastUnit can lead to complications when you are using elements
that exceed the width of the lastUnit (in which case your lastUnit
will break the flow - there is a thread about that problem in here
somewhere).

Just as an aside, the class name ".lod" could lead to problems when
you decide that you actually want it to be the opposite - then you end
up with a "light on dark" class which actually does the opposite. It's
the danger of using class names that bear a relation to what they
visually achieve.

If I were you I would just fix the width of the li and text-align:
center the content; then add a margin: 0 0 xpx to the image.

Hope I understood your problem correctly,
Erik

[Brian Moon]

On 11/8/10 11:23 PM, Kevin A. Cameron wrote:
> What's the proper way to add space between elements?

I will show you my way. I am not sure if it is the right way. Feedback
welcome.

http://brian.moonspot.net/grid-layout/oocss-grid-space.html

--

Brian.
--------
http://brian.moonspot.net/

[Nicole Sullivan]

Excellent advice Erik. I would make a gallery of images its own component rather than using grids (unless maybe it was very very simple)

Nicole

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

[Nelson Menezes]

Completely agree with Erik; it should be its own component — you can then do some inline-block magic that even makes the width of the page adaptable (see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/)

However, to answer the more generic question about adding gutter spacing between grid elements, you need to apply it to child elements, not the units themselves. I prefer to keep it conceptually clean by adding gutter <div>s, although it's more markup:

<div class="line">

  <div class="unit size1of3 firstUnit">

    <div class="unitGutter">

      …content…

    </div>

  </div>

  <div class="unit size1of3">

    <div class="unitGutter">

      …content…

    </div>

  </div>

  <div class="unit size1of3 lastUnit">

    <div class="unitGutter">

      …content…

    </div>

  </div>

</div>

And the CSS:

.unitGutter {

    margin-right: 5px;

    margin-left: 5px;

}

.lastUnit .unitGutter {

    margin-right: 0;

    margin-left: 10px;

}

.firstUnit .unitGutter {

    margin-right: 10px;

    margin-left: 0;

}

You'll notice that I've added the "firstUnit" class name — you only need that to support IE6. Otherwise you can get away with the :first-child selector.

Nelson Menezes
http://fittopage.org

[Jos Hirth]

The *proper* way would be to use box-sizing:padding-box and then just
some regular padding.

If you don't support IE6 and IE7, you can go this route. ;)