FancyBox Padding (Top and Bottom)

Question

I have added fancy box to my gallery of images, and by default there is space on the left and right of each image, but none on top and bottom. I've tried to add padding by using CSS but nothing changes. This is what I did:

#fancy {
    padding-top: 25px;
    padding-bottom: 25px;
}

This is the HTML:

<div id="fancy" class="container ">
    <div class="page-title">
        <h1>Church <span>Visit</span></h1>
    </div>

    <a rel="gallery" title="Takoosh Hovsepian speaking at Skyline Church with Jim Garlow & Dr. James Dobson" class="fancybox" href="images/gallery/church_visit/770 x 510_pic2.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic2.jpg" alt=""/></a>
    <a rel="gallery" title="Leading worship at Calvary Church Pennsylvania " class="fancybox" href="images/gallery/church_visit/770 x 510_pic3.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic3.jpg" alt=""/></a>
    <a rel="gallery" title="Joseph Hovsepian speaking at Downey, CA Christian school" class="fancybox" href="images/gallery/church_visit/770 x 510_pic4.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic4.jpg" alt=""/></a>
    <a rel="gallery" title="Andre Hovsepian speaking at youth conference" class="fancybox" href="images/gallery/church_visit/770 x 510_pic6.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic6.jpg" alt=""/></a>
    <a rel="gallery" title="Takoosh Hovsepian speaking at Open Doors women conference in Netherlands" class="fancybox" href="images/gallery/church_visit/770 x 510_pic5.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic5.jpg" alt=""/></a>

</div>

I've also tried to change the padding on jquery.fancybox.css , and still nothing changes. I am not sure if I am adding padding in the wrong place, or the issue is something else.

Here is my gallery

Answer 1

Try this:

 #fancy{
  margin-top: 25px;
  margin-bottom: 25px;
 }