CODEWITHSUNDEEP
csspadding
rnk
rnk

Reputation: 2204

css - using padding

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>​

enter image description here

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.

Upvotes: 0

Views: 230

Answers (2)

Simon Dorociak
Simon Dorociak

Reputation: 33495

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

You should know difference between them.

enter image description here

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.

Upvotes: 3

Mike Burnwood
Mike Burnwood

Reputation: 279

I opened your jsfiddle, but I don't understand what is exactly your problem. Try using margin-left.

EDIT: hawaii.five-0 beat me in this.

Upvotes: 0

Related Questions