Menu icon Foundation
Can a bottom margin be applied to a row?

I've added a margin-bottom rule of 2em on a row containing a photo, yet there is no change on the page.

I have a photo set within a band of background color and wish the band of background color to only be as tall as the photo. Whether I apply the margin bottom color to a div containing the photo OR to the column containing the photo, the row gets a bit taller—by 2em to be exact—thus exposing background color below the photo.

I'm putting the background color on the row because I want it to be full bleed left and right.

Does anyone have a suggestion?

Screenshot row margin issue

Foudation 5bottom marginrow

I've added a margin-bottom rule of 2em on a row containing a photo, yet there is no change on the page.

I have a photo set within a band of background color and wish the band of background color to only be as tall as the photo. Whether I apply the margin bottom color to a div containing the photo OR to the column containing the photo, the row gets a bit taller—by 2em to be exact—thus exposing background color below the photo.

I'm putting the background color on the row because I want it to be full bleed left and right.

Does anyone have a suggestion?

Screenshot row margin issue
Rafi Benkual over 5 years ago

Can you post your code or a link so we can see what is happening and better help?

You can add bottom margin with css
http://cdpn.io/Isphi

.row {
  margin-bottom: 2em;
}

Marc McGee over 5 years ago

This is the rule I am using to apply the color and then put a bit of space between this row and the start of the next row.

.lightBkg {
background-color: #f8f7f2;
margin-bottom: 2em;
}

I think I found the source of the issue. Has to do with some outer or closing div tags. I had built an outer page wrapper so that I could have a background that was full bleed left and right using .row .row.

Still need to investigate a bit further, but when I commented out that outer wrapper, my margin rule began to work.

Thank you for jumping in and at least confirming that certainly .row can have a bottom margin applied to it.

Marc McGee over 5 years ago

Still struggling with this. It may have something to do with the way I am embedding my rows and columns. My goal is to have a main content section that is wrapped in a box that contains an outer glow—defined in .page_box. However, I have an image placed into a column with a background color applied, and I want that background color to go right to the edge when my glow starts. As well, I want a bottom margin below the image so as to push the next row down just a bit so that the text is not flush up against the bottom of my image.

My code is below. If i comment out the OPENING AND CLOSING of the OUTER WRAP, my bottom margin rule defined in .lightBkg works. But then, I lose my outer glow.

Clearly I'm not structuring this properly. My rule for .page_box does not contain any margin rules, so I don't think it could be overriding the margin rule in .lightBkg

 <!-- OPEN OPENING OF OUTER WRAP -->
<div class="row">
<div class="row">
<div class="large-12 columns page_box">
<!-- CLOSE OPENING OF OUTER WRAP -->

<div class="row lightBkg">
<div class="large-10 columns small-centered text-center">
[[*mainImage]]
</div>
</div>
<!--begin container for main content text-->

<div class="row">
<div class="large-2 columns">
<p>text</p>
</div>
<div class="large-8 columns">
<p>text</p>
</div>
<div class="large-2 columns">
<p>text</p>
</div>
</div>

<!-- BEGIN CLOSING OF OUTER WRAP -->
</div>
</div>
</div>
<!-- END CLOSING OF OUTER WRAP --> 

Marc McGee over 5 years ago

I edited the post and inserted an image that might help illustrate the issue in conjunction with the code I just posted.

Wing-Hou Chan over 5 years ago

Hi Marc!

Another way you could do it is adding the margin-top rule to the div below.

I agree with Rafi, posting a link or some code would help so much!

Marc McGee over 5 years ago

Thanks for the feedback. I put my code in there so you can see the structure. It had occurred to me to put margin top, so thanks for the suggestion/confirmation. Part of me sees this as a fix / bandaid, which I prefer to avoid if at all possible.

This must have something to do with the way I am nesting. If you look at my code above, as soon as I comment out that outer most wrapper (The "OUTER WRAP") — both at the top and bottom, then the margin I created with my rule in .lightBkg works.

But as soon as uncomment the OUTER WRAP so that I can have a drop shadow/glow around the entire main content area, the margin-bottom no longer works.

I've been experimenting with various combination of that OUTER WRAP putting the .page_box (which has the shadow rule) on the row and then the column, etc. The worst thing that happens when I don't do the row row is that my light colored background and the red double dots extend beyond the shadow.

I've counted all my divs on the entire page and confirmed that there are no missing or extra closing div tags.

I am perplexed.

Marc McGee over 5 years ago

Does the shadow rule cause an inset? Maybe that's the issue. If placing a shadow causes the actual page to get a bit smaller, maybe that's why the red dots and my background color extend out past the shadow with some of my configurations. Much of the CSS3 is new and confusing to me. Actually, it's all a bit overwhelming—especially today.

Like if I have a 10px shadow, does that then reduce the size of the container by 10px or does the shadow extend out 10px beyond my container?

Marc McGee over 5 years ago

I tried putting margin top on the row below and it has no affect.

Marc McGee over 5 years ago

Adding padding top to the row below does work and puts space between. I can only assess that there must be some margin collapse or something going on. Perhaps by centering my small-10 column that holds the photo, a float is being created, which might be allowing the margin to collapse.

I give up.

Wing-Hou Chan over 5 years ago

Hey Marc!

Check out my Pen: http://codepen.io/winghouchan/pen/InGyD

You need to make your margin-bottom: 2em !important;

Something in Foundation's styles is overwriting your styles because they also have !important.

Wing-Hou Chan over 5 years ago

Actually, you don't need to make it !important.

I just took a look at Foundation's inner workings. Line 168 says .row{ margin: 0px auto }; . This shows that rule isn't !important . So what you need to do is place your own stylesheet last when adding your stylesheet into the head.

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="normalize.css" />
  <link type="text/css" rel="stylesheet" href="foundation.css" />
  <link type="text/css" rel="stylesheet" href="yourOwnStylesheet.css" />
 </head>

...
</html>

Marc McGee over 5 years ago

Ordering of the style sheets was a good point, but my own style sheet is last in the order. But that does not explain why the bottom margin works when the OUTER WRAP is removed or commented out.

In my code above I have that outer wrap surrounded with comments.

Something is getting thrown off as a result of the nesting is my best guess.

Marc McGee over 5 years ago

Just reviewed my head code an I had not included the normalize.css. I probably did not include it because it was not linked in the original index.html file with the F5 download.

I added in the normalize.css but the margin-bottom is not working. And since the margin-top applied to the row below has not affect, my only hack for now is to apply padding-top to the lower row.

Marc McGee over 5 years ago

Originally I had put margin-bottom on the row with no affect. So I move my class to the column. The result was that it put margin below my image and thus the background color was taller, and extended below my image.

Now, after doing all kinds of experimenting finally giving in to creating a hack with some padding top, I gave it one more try and put the class back on the column instead of the row, and now the margin bottom works and does not put space below in the same column as my image.

Here's my code, with the content removed for easier viewing. The class mylightBkg has the 2em margin-bottom. My instinct would be to apply the class to the row, but when I have the OUTER WRAP uncommented the rule has no affect why applied to the row.

Not sure if adding normalize helped. Maybe my nesting structure is still incorrect.

<!-- BEGIN OF OPENING DIV FOR CONTENT BIG OUTER WRAP -->
<div class="row">
<div class="small-12 columns page_box">
<!-- END OF OPENING DIV FOR CONTENT BIG OUTER WRAP -->


<!-- BEGIN MAIN CONTENT REGION -->
<div class="row">
<div class="small-12 columns text-center doubledot">
</div>
</div>

<div class="row">
<div class="small-10 columns small-centered text-center">
</div>
</div>

<div class="row">
<div class="small-12 columns text-center mylightBkg">
</div>
</div>

<!--begin container for main content text-->
<div class="row">
<div class="small-2 columns space-below">
</div>
<div class="small-8 columns space-below">
</div>
<div class="small-2 columns space-below">
</div>
</div>
<!--end container for main content text-->

<!-- END MAIN CONTENT REGION -->

<!-- BEGIN SUBCONTENT REGION -->
<div class="row">
<div class="large-4 columns text-center">
</div>
<div class="large-4 columns text-center">
</div>
<div class="large-4 columns text-center">
</div>
</div>
<!-- END SUBCONTENT REGION -->

<!-- BEGIN OF CLOSING DIV FOR CONTENT BIG OUTER WRAP -->
</div>
</div>
<!-- END OF CLOSING DIV FOR CONTENT BIG OUTER WRAP -->

Wing-Hou Chan over 5 years ago

The only solution then would be your hack or making your margin-bottom !important .

I don't see why Foundation's styles are overwriting your own styles.

Marc McGee over 5 years ago

Using !important on the margin-bottom works. The class applied to the row now displays properly.

Thank you!

OJ Tibi almost 4 years ago

Just an additional comment on suggestions written here: it's okay to create a general purpose utility class to add bottom margins to elements; where and how you write it makes the difference.

I've inspected the applied styles on sample code that I'm working on and found out that there's a separate .row .row declaration for Foundation nested rows, which of course takes precedence over the .lightBkg you suggested, which is the reason it doesn't work without using !important.

Of course you can just write it as .row .lightBkg, but that wouldn't work for top-level rows.