Unable to reduce vertical space between divs

Hello,

I’d like to reduce the vertical space between two divs so that the div on top of the image stays closer to the image, and the div at the bottom of the image stays closer to the image too.

Here’s the example:

http://www.cantinho.org/pt/cantinho-site/layout3.html

I have reduce the padding of “box_no_bottom”.
I have define the margin on " box_no_bottom" and “destaque” to 0.
But still, the space difference don’t disappear.

What/where should I change to make this work?

Thanks a lot once again,
Márcio

Newbie attacks again:

Done. Hope the right way. :slight_smile:

I’ve give negative margins to the div that holds the image, and the space has shortened.
Something like:
.container .destaque
{
margin-top:-5px;
margin-bottom:-10px;
}

Regards,
Márcio

Hi, that is just a bandaid fix by the sounds of it because divs dont have any margins or paddings so something else is conflicting. If you put it back I can tell you what actually is going on (I don’t know if you updated your page but it sounds like you did)

Hi Ryan,

Thanks for the reply.

Well, I haven’t change the page. It’s the same as before.
The point is to have the boxes closer to the image, a distance near this one for example: (please ignore the logo and the padding near…)
http://www.cantinho.org/pt/cantinho-site/layout3_2.html

Thanks a lot,
Márcio

On the link you just gave, “.container p” has bottom padding which is causing space, and “.container .bottom, .container .bottom div” has a height which is also leading to space.

And as to the bottom part, “.container .box_no_bottom” has top padding which is causing space.

There would be a difference in the bottom space and top space of the image in the destaque div, because the img tag is an inline element holding the physical image. The vertical alignment of that element is at an em-fraction of the font-size above bottom, at the base-line, to level with eventual text sharing the same line. You can see the image bottom space increase/decrease accordingly with changing font-size.

To remove the extra space below the image you can apply vertical-align bottom on the image,


.container .destaque img {
    vertical-align: bottom;
}

or give the image a display as block instead, then it will not create a text-line to sit on.


.container .destaque img {
    display: block;
}

The default div blocks are close without any gaps.

In your last post you make them overlap by negative margins. That makes the backgrounds of the divs above and below come closer. I guess that is what you had in mind trying to reduce the space between the divs. Now you can make the negative margins symmetrical. :slight_smile:

Even if I change the box_no_bottom padding to 0, I will not get the div closer to the image.
I’ve seen on firebug, and the only thing we get is the text inside (the blablabla) to be more on top, but the container (box_no_bottom) doesn’t move an inch near the image. :s

Unfortunately, I need that height, because is what allow the bottom border shadow to appear. If I reduce, even to 10px, I still have a space gap, but I get no shadow.

According to this, should I return the negative margins, and take ErikJ advice by removing the extra bottom space of the image container? Since i will be able to properly define the negative margins… I mean, at least they get symmetrical, that doesn’t sound that much as a bandaid… :smiley:

Regards,
Márcio

Yes you should do that. I didn’t even notice the shadow at my resolution so sorry for missing you needed that. The extra space at the bottom of the image is indeed the whitespace left for text descendants (don’t know why Erik made it sound so complicated lol)

He gave you several fixes.

I have another issue, I don’t know if I should create another post since it’s on the same page…

I’d like to allow people that don’t see that well, and need to increase the browser default font size, to see the site I’m building. For that, I’m using em. Cool.

However, if we go here:
http://www.cantinho.org/pt/cantinho-site/layout3.html

and we increase the font size, the elastic works for all, but not for the image.

What do we need to do on those scenarios, knowing that we prefer to not have a distorted image?

Regards once again,
Márcio

I don’t know exactly what a professional would do but I would just keep the image kept in px becuase that’s the best place for it. Images shouldn’t resize because as you said, it distorts it.

As curiosity, I’ve change the values of the image to em:

.container .destaque img
{
	display: block;
width: 59.625em; /* replaces 954px width */
height: 15em; /*replaces 240px height */

}

I’m glad with the results, I see no obvious distortion here. :smiley:
http://www.cantinho.org/pt/cantinho-site/layout3.html

I will always do surveillance on this, however, not bad at all hm?

Regards,
Márcio

Well no there won’t be distortion right now because they are the same values basically. On text resize it will get bigger of course and if it’s bigger then the original image THEN it will start to geet distorted, but not before it exceeds the normal images dimensions.

Yes, and what I’ve write is actually after the text resize. :slight_smile:
I’ve test them on IE8 and FF3 and Safari 4, all worked quite nice to me. :wink:

Regards,
Márcio