how to create space between the images? - html

Question

I am getting my head around bootstrap 3 , html5 and css3. Trying to build a page containing a few images:
.front {
margin: 3px;
padding: 3px;
}
img {
height: 300px;
}
<div class="form-group">
<div class="col-lg-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
</div>
Question: how can I display the images adding some space (margin, padding) between them? I tried to set the margin/padding for the img css rule:
here is a link to the code:https://github.com/dimster2013/soccerapp/commit/f9bde7aafbcffffabc9b034b66ee25440ea5f6aa

Answer 1

Add Below CSS
.col-sm-3 .front img {
padding: 10px 5px 5px 10px !important;
width:100%!important;
}
.col-sm-3{
padding:0px!important;
}
<div class="form-group">
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
</div>
</div>
</div>

Answer 2

If you have a look at your markup, you are using div elements with class col-lg-3 in which house your img tags.
By placing:
.col-lg-3 {
display: inline-block;
margin: 3px;
padding: 3px;
}
on this div class instead, it should work for you.
The reason your images are displaying one per line is due to div elements being display: block declaration by default. Overriding this by setting inline-block would allow multiple images per line (if screen width permits).
A quick demo would be:
img {
height: 300px;
}
.col-lg-3 {
display: inline-block;
margin: 3px;
padding: 3px;
}
<div class="form-group">
<div class="col-lg-3">
<div class="front">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
<div class="col-lg-3">
<div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
</div>
</div>
</div>

Answer 3

One way is to add a margin to div (col-lg-3) containing the images - this rule could look similar to this:
.col-lg-3 {
margin-bottom: 40px;
}
That will add space between the images as you asked for. It will still display all images underneath each other, not on the same line; other answers to your question explain why.