Add margin around image in list

Question

I have been able to show an image in a list with a gradient here :

http://stackoverflow.com/questions/23747548/css-list-not-working-if-in-hex/23749271#23749271

I now need to add a margin around the image. I can't seem to find the CSS to do this.

MrWarby

Code from the default.css file that controls the list: (it is a bigcommerce site)

.SubCategoryList li a,.topNav .CategoryList li a,.homeNav #SideCategoryList li a, .MenuList li a{


/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */


background-size: 80px 80px;



/* background-image:url('http://static.dezeen.com/uploads/2013/03/dezeen_Sergio-concept-car-by-Pininfarina_ss_4.jpg'); */

}

.SubCategoryList li,.topNav .CategoryList li,.homeNav #SideCategoryList li, .MenuList li{
position:relative

}

.SubCategoryList li a:before,.topNav .CategoryList li a:before,.homeNav #SideCategoryList li a:before, .MenuList li a:before {
font-family:'FontAwesome-webfont';
font-weight:normal;
font-style:normal;
content:"\f054";
position:absolute;
top:50%;
right:10px;
z-index:1;
font-size:14px;
color:#ccc;
margin:-8px 10px 0 0

}

existing list !(https://www.dropbox.com/s/bbu4xkc2h0m26fl/Screen%20Shot%202014-05-20%20at%2014.52.42.png)

required look !(https://www.dropbox.com/s/9vbr2ap26wbdgfo/Screen%20Shot%202014-05-20%20at%2014.52.27.png)

@Andy Holmes. Code added – user3193843 May 20 '14 at 15:55 — user3193843, May 20 '14 at 15:55

Bas · Answer 1 · 2014-05-20T14:10:40.127

0

Try this code:

img {
   margin-left: 20px;
}

edited May 20 '14 at 14:10

answered May 20 '14 at 13:22

Bas

2,106
5
21
59

Hi @Dreiba I added padding: 20px; and this seems to add around both the left image and the gradient. Is it possible to add padding around just the left image ? – user3193843 May 20 '14 at 13:38
Do you mean the left side of the image, or the actual left image, so the first one i suppose? @user3193843 – Bas May 20 '14 at 13:39
Sorry I mean add a blank border aorund the left image so it shows smaller in the list (ie has a 5 px gap top and bottom. Hope I'm making sense. – user3193843 May 20 '14 at 13:40
Updated my thread, and i have no idea where you are talkin about. If you want a small border around you'r image. I should use a `margin-right` or a `margin-left` of `5px` – Bas May 20 '14 at 13:42

Add margin around image in list

1 Answers1