CODEWITHSUNDEEP
htmlcss
user2728841
user2728841

Reputation: 1427

Why does setting padding on an element affect all siblings in the same div

In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.

.rs-pageclick img {
  cursor: pointer;
  display: inline-block;
  margin-top: 15px;
}
<div class="rs-paging">
  <div class="rs-pageclick">
    <img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
  </div>

http://jsfiddle.net/paull3876/qds8pnfx/2/

I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it seems the same with padding or margin.

I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding.

Upvotes: 3

Views: 1752

Answers (2)

H.P. Lafayette
H.P. Lafayette

Reputation: 76

Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :

https://jsfiddle.net/qds8pnfx/5/

Upvotes: 2

Rijk
Rijk

Reputation: 969

The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.

Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.

http://jsfiddle.net/nea4w6h3/1/

Upvotes: 4

Related Questions