1

I tried every combination of display, float, width/height and set all the margins and paddings to 0 but having the container with display: inline-block always generates a margin-bottom that I can only remove by adding the style "margin-bottom: - ... px "

Please take a look at the code, it's very basic index.php

Anyway I'm open to any kind of solution, I just want the div ".posts" to contain the posts so if there are solutions without "display: inline-block" it's okay to me.

Thanks everybody in advance

  • what space.? spaces just after blue blocks.? – CodeRomeos Sep 25 '15 at 17:22
  • Why does it need to be inline-block in the first place? Why not block? (Or nothing, since div is a block element by default) – Talya S Sep 25 '15 at 17:23
  • Anyway since inline-block makes the element inline, it gets extra height from line-height. If you set its parent's (in this case `#main`) line-height to 0 you won't have the space. You might have to set a different line height for inner elements though to undo this for your actual text. – Talya S Sep 25 '15 at 17:25

4 Answers4

2

Figured I might as well post this as an answer:

I don't see why it needs to be inline-block in the first place and not a regular block, but in case it does- since inline-block makes the element inline, it gets extra height from line-height the descender. If you set its parent's (in this case #main's) line-height: 0 you won't have the extra space.

You'll have to make up for this later by giving your inner elements a different line-height, like .posts { line-height:1.5 } or your text won't have any height.

Community
  • 1
  • 1
Talya S
  • 734
  • 5
  • 20
2

The space you are seeing is the space given to the descender height of letters like a lowercase y or g when an element's display value is set to inline-block;. You are essentially treating an element like it is text when you set it to display: inline-block;.

To fix, remove display: inline-block; from your .posts DIV. It doesn't need it for the layout you have.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • 1
    I didn't know that space was due to the descender! Always thought inline elements were just being annoying. Thanks for that! – Talya S Sep 25 '15 at 17:34
  • If you do a search for `space under img tag`. That space is due to an `` tag being `inline-block` by default and providing room for the descender. [SO post illustrating the issue](http://stackoverflow.com/questions/13917008/space-under-img-tag). – hungerstar Sep 25 '15 at 17:37
  • I've fixed this problem before by setting `display: block` on images, but again thought it was just some weird line-height quirk. Notice the word "descender" isn't actually mentioned in the link you provided :) (I'm not the OP btw, in case you missed that) – Talya S Sep 25 '15 at 17:41
  • @TalyaS true, and I noticed. The link does visually show the space between the bottom of the image and the border being applied to the outer DIV as an example of `inline-block`. The gap is that descender space. My answer is just one solution. The one given in the link is another. [Here's a post that does mention _"descender"_](http://stackoverflow.com/questions/7774814/remove-white-space-below-image). – hungerstar Sep 25 '15 at 17:47
  • 1
    Sure, I was just grateful that you gave me a name (and an explanation) for the phenomenon. I wasn't criticizing the link you provided- I was pointing out that they didn't know what it was either. They gave solutions- but like me they thought it was a quirk. Edit: noticed the new link you provided now, cool. Learned something new today anyway. – Talya S Sep 25 '15 at 17:52
0

First of all, you're using #post in several places. This is very bad practice. Using ID's should be unique. You're going to get really mixed CSS output as a result of that. Change those to .post. See https://css-tricks.com/the-difference-between-id-and-class/

Secondly, .posts should be display: block, since you're not lining them up in a row. See: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Thirdly, your .sep has margin: 8px 33px, which is creating the space. If you remove that margin, you won't have that space.

Phillip Chan
  • 993
  • 7
  • 17
0

you can add font-size:0 property to the class posts and change its value in post class according to your requirment

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
AG_
  • 2,589
  • 3
  • 20
  • 32
  • Yeah I see that by setting font-size or line-height to 0 it works even with display:inline-block. Thanks a lot! –  Sep 25 '15 at 22:57