space between items in sidebox

Please see attached screenshot. Is there an Admin/Layout control for creating space between the product items, or do I need to manually modify a file? Thank you.

Add to the bottom of your templates stylesheet and adjust to suit

.sideBoxContentItem {
        padding: 0em 0em 2em 0em;
        }

You can add padding-bottom or margin-bottom to a class in your stylesheet to get extra spacing. It will help to see your site live to know exactly which class is best to use (there were changes in the latest version 1.3.9g).
Kobra's suggestion should work for the latest version.

Thanks to both repliers. I understand. I have 1.3.9g so Kobra's solution should work. One quick clarification: this must be done in the stylesheet? It's not controllable in Admin? As I become more familiar w/ Zen Cart, I am naturally becoming more and more confused about what can and cannot be done in Admin and what has to be done in code. Thanks again for replys -- much appreciated!

As I become more familiar w/ Zen Cart, I am naturally becoming more and more confused about what can and cannot be done in Admin and what has to be done in code.
Us too!!!

Styling is almost always in the css

I added the following code to the bottom of the stylesheet. I once ran a code formatter on the stylesheet, that alphabetized all the entries, and that caused great problems, but apparently putting new stylesheet entries at the bottom is okay.

.sideBoxContentItem {
padding: 1em 0em 1em 0em;
}

.centerBoxContentsNew {
padding: 0em 1em 0em 1em;
}

I created this new entry for the centerBox, rather than making a change to an existing stylesheet element that has a margin setting for a whole group of items including centerBoxContentsNew, because I didn't know how the additional padding would affect all the other items in that group.

An inquiry if I may, w/o seeming too critical? After all the years that Zen Cart has been around, why would it still come stock with no spacing between the sidebox items? That just seems odd, so thought I'd ask.

"a code formatter on the stylesheet, that alphabetized all the entries"
As CSS is sensitive to the order of rules, something like this is guaranteed to cause problems in many situations. I find it hard to believe that an app as dangerous as this has actually been released for public use, or is intended to be used on CSS files.

"I created this new entry for the centerBox"
That is almost always the best way to do something like this, where a rule affects a group of selectors.

The multiple items in those sideboxes is a relatively new feature (only a few releases ago - v1.3.6?? more or less), and the ability to address items without affecting the whole box content is new in the latest v1.3.9g. It is a subtlety that has not yet been looked at by the devs, and may be covered in the major v2.0 rewrite which will change most of the code.

adding a tiny bit of padding (anything more than 0.1em) or margin to centerboxNew items causes the third item on the row to force down to a row of its own. For readability, I was hoping to add this padding so text from one item does not flow right next to text from the item next door. Also, a tiny bit of padding would keep text off the left and right borders a bit also.

Are these centerbox content items hard coded for width in a way, so that adding any or hardly any padding or margin causes the force of the third item to go down to the next row? Any workaround? The selector I have been testing with is an isolated one I created:

.centerBoxContentsNew {
<<various padding and margin test settings>>
}

thank you...

yeah, this is weird, it seems that adding padding to the interior of these 'cells' so to speak, would/should only cause the squeezing of the text within the cell, and would not have any effect on anything to the left or the right outside of the cell. Yet, anything more than .01em of padding causes the third item on the row to force down on to its own row.

A search in Dev Toolkit for this selector reveals that column width is a percentage. That would also have to be different if you have two columns or five columns. But still, it's a mystery to me that making some padding within the element affects column placement of entire centerbox.

hold the phone -- I checked the source code and discovered that the class is actually

centerBoxContentsNew centeredContent back

margin and padding does not seem to have any effect on this class w/ these attributes, but maybe I'm just not doing it right. Any ideas?

It is an annoying quirk of CSS that padding in an element with specified width will add that amount to the width of the element, instead of the intuitive way of pushing in the content. Padding in a block element with unspecified width (which expands to fill its container) will push in the content.

The best workaround may be to add margins to the box's contents, which will push it in from the box edges without affecting the box width.
You could also override the inline styling (which is necessary to auto-adjust the width for floated boxes) by adding !important to the value in the stylesheet rule.

.xxx {width: 32% !important;}

centerBoxContentsNew centeredContent back is three classes applied to one element, not a single class. If for some reason you want to use two or more classes to control an element, do it like

.centerBoxContentsNew.centeredContent {}

with no space between the class tags.