What is the problem with this CSS resulting in Gap Space

HTML & CSS
1

Hello.

In this page:
https://www.anoox.com/overview_pitch_my_business.php

we are having strange Gaps appear between some section, even though we have set the margin to 0px.
For example look at the section with heading:
“Why is this Service so Valuable?”
and the section (DIV) about it:
we have for that DIV set: margin-top: 0px;
and for the DIV about it set: margin-bottom: 0px;
But still there is that wide (30px) gap space between these 2 DIVs!
What do we need to do to close that Gap and have these DIVs the desired gap which is either 1px or 0px?

Thanks

2

The gaps are being caused by collapsing margins. The top and bottom margins from the text paragraph are flowing past the edge of their parent container. You can read more about “collapsing margins” on the web.

You can overcome them several ways. I will mention three:

(1) put at least 1px of padding at the top and bottom of the parent container showing the gap.
(2) put at least a 1px border-top and border-bottom of the parent container showing the gap.
(3) assign {overflow:hidden} to the parent container showing the gap.

<div style="font-size: 20px; font-weight: bold; padding-top:1px; padding-bottom:1px;">
    <p>Why is this Service so Valuable?</p>
</div>

element.style {
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
}

element.style {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    font-size: 20px;
    font-weight: bold;
}

element.style {
    font-size: 20px;
    font-weight: bold;
    padding: 1px 0;
}

This phenomenon is very easy to see if you simply use a tool like Firebug or any built-in developer’s tool.

3

(Just piling on here) This one tends to be the cleanest solution for overflowing/leftover space issues. The padding and border options unnecessarily manipulate the box model, particularly if it’s a global issue. :slight_smile:

4

ronpat, I applied your 1st suggestion. And it took care off the problem just fine. Thanks :slight_smile:
But I do not understand why in GODs name adding:
padding-top:1px; padding-bottom:1px;
would take care off that un-wanted 30px Gap!
Man CSS is so strange sometimes :slight_smile:

5

Oh really!
I used the 1st suggestion.
I am confused about: overflow: hidden;
Where would this go? Into the Top DIV or DIV below it or the DIV that contains all the inner DIVs?
What is element in element.style?

Thanks

6
3 Likes
7

The gap is the default top margin on the inner p element which collapses and becomes the margin top on the div element thus causing your gap. When there is no content between the div and the p and that div element has neither padding nor border then margin collapse occurs. As soon as you put something solid like padding on the div then the top margin of the p element can no longer collapse and then the p element is pushed downwards and not the parent div.

Margin collapse does not occur on elements that create block formatting contexts which is why overflow other than visible (applied to the div in your example) stops the margin collapse as overflow (other than visible creates a new block formatting context).

Other properties such as float, display:table-cell (display:table but only because of the anonymous table-cell element), display:inline-block and absolute positioning will also stop margin-collapse as they also create new block formatting contexts.

Overflow:hidden is useful but you can’t use it if you need visible overflow (such as in the case of a dropdown) which is why I will avoid using it globally as you never know what you may have to add to a page at a later date (e.g.Oh by the way can you stick a dropdown in the header).

As usual with css the devil is in the detail and can be confusing because there are rules that have to be obeyed and understood. Often the properties you use depend on the type of layout you are creating and you always need to think ahead. There is no right or wrong way for all situations.

In reality margin issue is usually only a problem where you have background colours on the divs as its the coloured background that appears to be misplaced while the content seems to be where it should.

1 Like
8

They seem to have re-branded my original article but most of that was written by me :slight_smile:

5 Likes
9

WOW!
Interesting. Thanks.
OTN, do you have a Super Book on all these CSS rules that make it so strange, to suggest to buy?
So that one can see clearly through its murky waters, as you all do :slight_smile:
Of course, I do not want a CSS for beginners, but like CSS for Advanced type.

10

The sitepoint reference was a good reference although it hasn’t been fully updated yet.

This is also an excellent reference.

In the end its a matter of reading many such references and then practising what they preach.

1 Like
11

Must have been a “bidness” decision because it wasn’t very respectful.

1 Like
12

Off-Topic

It seems a type of

.footnote { 
  font-size: 0.2em; 
}

could have been the least to do.

1 Like
13

Thanks. When I get a chance I shall spend a Month to read through all these CSS items :slight_smile:

14

Hi,

Not sure what you mean by this!

15

My “Off-Topic” was meant to indicate that it had nothing to do what-so-ever with your discussion.

It was an opinion on authors not acknowledging the source(s) of their derivative works.
But I have an academic background where such omissions would be seen as poor form if not outright unethical.

4 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.