CODEWITHSUNDEEP
cssmarginpadding
eshellborn
eshellborn

Reputation: 11261

CSS margin and padding not being applied

So I've got essentially a list of items, that are separated by a border. I'd like to have equal padding and margin applied to the top and bottom of each item.

Here's a fiddle that contains a simplified version of what I'm working with.

Now, you see, I have 10px of margin and padding applied to the top and bottom of each item, but the items aren't evenly spaced. There's more space above each item than below it.

I realize that this is probably a result of CSS's collapsing margins behaviour, and that I could fix it by adding more padding than margin to get the spacing I want.

The issue is, however, that to some items, I want to highlight by adding a background colour, like this fiddle. And when I do, the padding on the top and the bottom must be the same.

So how can I fix this issue? I want it to be super flexible, so I can customize the amount of padding and margin if I like, and also be able to remove the border but still have it display properly.

HTML:

<div class="list">
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
</div>

CSS: 

.item {
  display: block;
  width: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid red;
}

.fill {
  background-color: #aaa; 
  display: block;
  height: 150px;
}

.bg {
  background-color: #ccc;
}

Upvotes: 1

Views: 5333

Answers (3)

Sagar B
Sagar B

Reputation: 204

The reson for problem lies in margin itself. If you are providing a margin then it will take a blank space from provious element. Now if you are applying padding means indirectly u are increasing div size. Here in your problem u can solve this by making top and bottom margin 0 and instead doubling padding in ".item" class as follows:

.item {
    display: block;
    width: 150px;
    **margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 20px;
    padding-top: 20px;**
    border-bottom: 1px solid red;
}

this will look perfect without touching to other code segments!

Upvotes: 1

IronWilliamCash
IronWilliamCash

Reputation: 539

The problem is the way you are seeing things. The padding and margins are all equal, but you can't see them that way as you only have a bottom border. If you add a top border (red like the bottom one), you can see that the spacing is exactly the same between the items.

Now if you want to fix your problem, you have to take into account that you only have one border, so you can remove one of the paddings or margins.

Edit: Replace your css code with the following and you should achieve what you want: 

.item {
display: block;
width: 150px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid red;
}

Edit 2: I just realised that because of your highlighting in your second example, you'll run into another problem. So you'll probably have to take out the red line from the divs and put them into a separate entity.

Edit 3: Here's a jsfiddle with updated, hope it does what you want.

Upvotes: 0

Manube
Manube

Reputation: 5242

Here is a fork of your fiddle

To achieve correct symetrical, vertical spacing, I actually created a 1px div to replace your border:

<div class="myborder">&nbsp;</div>

with myborder class like so:

.myborder {
    heigth: 1px;
    background: red;
    font-size: 1px;
    margin-top: 10px;
    width: 150px;
}

The border div is placed in between item divs, like so:

<div class="item">
  <span class="fill">&nbsp;</span>
</div>
<div class="myborder">&nbsp;</div>
<div class="item bg">
  <span class="fill">&nbsp;</span>
</div>

In item class, I removed the border and margin-bottom attributes:

.item {
    display: block;
    width: 150px;
    margin-top: 10px;
    /*margin-bottom: 10px;*/
    padding-bottom: 20px;
    padding-top: 20px;
    /*border-bottom: 1px solid red;*/
    background-color:yellow;
}

You will get symetrical, vertical spacing between items as long as myborder's margin-top and item's margin-top attributes are equal.

UPDATE: in the provided, forked fiddle, I also created an invisible border class, as you mentioned being able to remove the border and keep proper spacing:

.myinvisibleborder {
    height: 1px;
    background: transparent;
    font-size: 1px;
    margin-top: 10px;
    width: 150px;
}

By setting background to transparent, it becomes invisible; another way would be to set height and font-size to 0px;

Upvotes: 3

Related Questions