CodePen

HTML

            
              <!--Option 1

Applies specific class to each element, resulting in classes everywhere

-->

<section>
  
		<article class="bdrb mgb1 pdb1">
			<p>Content</p>
		</article>	
  
    <article class="bdrb mgb1 pdb1">
			<p>Content</p>
		</article>	
  
    <article class="bdrb mgb1 pdb1">
			<p>Content</p>
		</article>	
  
    <article class="bdrb mgb1 pdb1">
			<p>Content</p>
		</article>	
  
    <article class="bdrb mgb1 pdb1">
			<p>Content</p>
		</article>	
		
</section>


<!--Option 2

A lot cleaner HTML CODE, but more CSS 

-->

<section class="hbox">
  
		<article>
			<p>Content</p>
		</article>	
  
    <article>
			<p>Content</p>
		</article>	
  
    <article>
			<p>Content</p>
		</article>	
  
    <article>
			<p>Content</p>
		</article>	
  
    <article>
			<p>Content</p>
		</article>	
		
</section>
            
          
!
via HTML Inspector

CSS

            
              /*Option 1*/
.bdrb   {border-bottom:1px solid #ccc}
.mgb1   {margin-bottom:1em}
.pdb1   {padding-bottom:1em}

/*Option 2*/

.hbox article {
  border-bottom:1px solid #ccc;
  margin-bottom:1em;
  padding-bottom:1em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................