Margins & Padding is used every day within our coding life. Its essential to the positioning of the structures and elements of our designs, but sometimes it is not used to its full potential.
 
Creating margins is pretty basic coding, its not very strenuous but when talking to other designers, i quickly found out, that they hadn’t thought to use this solution to various tasks.
 
The solution i am going to talk about in particular is zeroing the margin on last article of a horizontal row.
 
If you have a row of 6 elements and you would like them evenly spaced but do not require the 6th article to have the margin applied to it, what do you do?
 
My solution is to zero the margin to the 6th child, and easily.
 
You may ask, “why zero the margin”?. Will, If the 6th article, is the last article in that row, and you want your objects to be evenly spaced without pushing the 6th article to the below row, then by zeroing it, you will delete the margin attached to it, therefore taking away the attachement of the margin, leaving it in place beside the other 5 articles, evenly spaced.
 
This basic zeroing of the first 6th article:
 

article{padding-right: 20px;}
article:nth-child(6){padding-right: 0px !important;}

 
If you would like to apply the zeroing technique to every 6th child article, thats also simple, just add “+6″, this indicated thats every 6th child proceeding that, then the css to follow should be applied to it also.
 

article{padding-right: 20px;}
article:nth-child(6+6){padding-right: 0px !important;}
© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure