CSS Bottom Margin Issue

Question

I am creating a list with a name, job description, and location. This list contains 30 or so names. I would like the last item-location in the list to have about 20px of margin below to separate the names. So it would look like:

Name
job description
location

Name
job description
location

Name
job description
location

etc.

I'm also having some issues with text color, but the main issue is the spacing.

JSFiddle to the below code:

<style> .hed_Brown {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #996633;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Green {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #7f9c99;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Blue {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #011e41;
      line-height: 18px;
      margin-left: 15px;
      margin-bottom: 20px;
  }
  </style>

<span class="hed_Brown">Robert Mazzeo</span>
<br> <span class="hed_Green">Load Out Manager</span>
<br> <span class="hed_Blue">Lakeland FL</span>

<br> <span class="hed_Brown">WJ Mahon Jr.</span>
<br> <span class="hed_Green">Sales Manager</span>
<br> <span class="hed_Blue">Jacksonville FL</span>

<br> <span class="hed_Brown">Charles Metzger</span>
<br> <span class="hed_Green">Display Assistant</span>
<br> <span class="hed_Blue">Wichita KS</span>
<br>

Please include the code in your question instead of a link to a jsfiddle — Joren, Sep 03 '13 at 15:16
Although fiddles are very useful, you should really include the code in your question too so it will be useful for others in future. — CaribouCode, Sep 03 '13 at 15:18

score 3 · Answer 1 · edited May 23 '17 at 12:20

It would be a good idea to use a container for each group. For example:

<div class='contact'>
   <span class="hed_Brown">Robert Mazzeo</span>
   <br> <span class="hed_Green">Load Out Manager</span>
   <br> <span class="hed_Blue">Lakeland FL</span>
</div>

So you can give the margins you want to .contact. In this case, you would probably add:

.contact{
   margin-bottom:5px;
}

Moreover, I would recommend using <div> instead of <span> and <br />, as the display propierty of the div already makes the break. Some more info about this here: SPAN vs DIV (inline-block)

score 1 · Accepted Answer · answered Sep 03 '13 at 15:17

1

Here's one way:

http://jsfiddle.net/jonigiuro/GEkP8/1/

.hed_Blue {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #011e41;
  line-height: 18px;
  margin-left: 15px;
  margin-bottom: 20px;
  display: block;
}

span elements, are "display: inline" as default, that's why you needed those extra

<br>

if you declare them "display: block" the problem is solved

answered Sep 03 '13 at 15:17

Jonas Grumann

10,438
2
22
40

All good solutions, but this one is the fastest for the amount of names I have to edit.thank you – Kyle Sep 03 '13 at 15:32

score 0 · Answer 3 · answered Sep 03 '13 at 15:18

0

In the fiddle, you should remove the <style> tags and add the attribute display: block: http://jsfiddle.net/GEkP8/2/

answered Sep 03 '13 at 15:18

Joren

3,068
25
44

CSS Bottom Margin Issue

3 Answers3