Question

I want to make some design tweaks. Here is the code for html:

<div class="addbox">
<h4><span>Pick your best work from <b class="highlight-text">Flickr</b> to display in your portfolio</span></h4>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
</div>​

I’m using padding-left for .addmenu-item but it is not perfect as you can see in the image. The problem is with the background color, I tried some other methods, but no use.

Here is jsfiddle http://jsfiddle.net/Dkh4q/34/

Thanks!

UPDATE
Sorry, the problem is that the image item is not spaced perfectly. I forgot to try margin-left.

Answer 1

Instead of padding-left: 20px; set margin-left: 20px; property.

You should know difference between them.

When you want to separate elements, just use margin property not padding.

Padding is the space inside the border, between the border and the
actual view’s content.

Margins are the spaces outside the border, between the border and the
other elements next to this view.

More information about difference between padding and margins.