How to move a circle down by 15px with CSS HTML - html

Question

I would like to move the circle down by 15px with CSS as an image below. I've attempted with padding-bottom or margin-bottom in the .circle class, yet it did work in another way as making the circle longer than itself.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td>
<div class="news_column1">
<a target="_blank" href="http://google.com">
<span class="circle">P1</span>
<span class="imgswap">Showroom 1</span>
<div class="news_img">
<div>
<p>Book Now!</p>
</div>
</div>
</a>
</div>
</td>
</tr>
</table>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 20px;
width: auto;
border-collapse: collapse;
}
table td {
padding: 0;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
}
table tr .text_plant_address {
background-color: #FFF;
width: 200px;
height: 200px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 195px;
width: auto;
}
table tr td div {
width: 200px;
height: 200px;
position: relative;
}
table tr td a {
text-decoration: none;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
font-family: ballpark_weiner, Arial;
font-size: 26px;
letter-spacing: 1px;
padding: 0 15px;
}
table tr td .text_address {
font-size: 10px;
font-family: Arial;
display: block;
position: relative;
height: auto;
margin-top: 5px;
}
.news_column1 {
background-color: #FF7F7F;
/*background-color: #FFF;*/
/*border-radius: 15px;*/
}
table tr td div:hover {
cursor: pointer;
}
.news_img {
width: 200px;
height: 70px;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
font-family: 'Times New Roman';
font-weight: bold;
letter-spacing: 0.5px;
display: none;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.95;
/*border-radius: 0 0 15px 15px;*/
}
.news_img div {
width: 200px;
height: 10px;
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.news_img div p {
display: block;
margin-top: 25px;
font-size: 17px;
color: #FFF;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Opera, Chrome, and Safari */
}
span.circle {
width: 100px;
height: 100px;
font-size: 30px;
color: #fff;
line-height: 100px;
text-align: center;
background-color: #111111;
opacity: 0.3;
display: block;
margin: 0 50px 0 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
span.imgswap {
display: block;
opacity: 0.5;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
font-family: sans-serif;
font-size: 20px;
padding-top: 10px;
font-family: Stark;
letter-spacing: 0.5px;
}
JSFIDDLE: http://jsfiddle.net/huydq91/rB5hX/7/

Answer 1

Just need to add padding to;
table tr td div {
width: 200px;
height: 200px;
position: relative;
padding-top:15px;
}
UPDATED JS FIDDLE

Answer 2

One solution is to add a padding-top:15px; to div.news_column1 as in this JFiddle snippet.
A question: are you stuck with the markup or do you have freedom to change it?

Answer 3

Make Changes in following class. It will come circle below
table tr td a {
text-decoration: none;
display: block;
padding: 40px 0 0 0;
}
and Reduce the height in following class
table tr td span
{
//height:''
}