Comments on: Where’s My Margin Gone? (or why 1+1=1) http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/ Internet Marketing, Website Promotion and Blogging Advice Sun, 29 Jan 2012 02:18:27 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Paul OB http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-142251 Paul OB Mon, 18 May 2009 08:19:46 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-142251 Hi JohnM, Collapsing margins apply to nested elements also and not just to adjacent elements. (vertical margins on inline elements do not apply anyway) If you have a p element nested inside a div and there is no borders padding or content between the edges of the nested element then the vertical margin on the p element effectively collapses onto the outer element and becomes a margin on the div instead. For example if the p element had a top margin of 1em it would not move the p element 1 em away from the parent div but would actually move the parent div 1em away from whatever was above it (assuming there were no more margin collapses above). Try out the demos above to see this in action :) Hi JohnM,

Collapsing margins apply to nested elements also and not just to adjacent elements. (vertical margins on inline elements do not apply anyway)

If you have a p element nested inside a div and there is no borders padding or content between the edges of the nested element then the vertical margin on the p element effectively collapses onto the outer element and becomes a margin on the div instead.

For example if the p element had a top margin of 1em it would not move the p element 1 em away from the parent div but would actually move the parent div 1em away from whatever was above it (assuming there were no more margin collapses above).

Try out the demos above to see this in action :)

]]> By: JohnM http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-142189 JohnM Sun, 17 May 2009 22:40:59 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-142189 I thought both the div and the p tag are block elements so that the margin of the nested p tag is not even touching the margin of the div in the first place because the p element is actually inside the div element. So why do you even need to add a pixel of border or padding when their not even touching in the first place? I thought both the div and the p tag are block elements so that the margin of the nested p tag is not even touching the margin of the div in the first place because the p element is actually inside the div element. So why do you even need to add a pixel of border or padding when their not even touching in the first place?

]]> By: Let’s Be Clear About This! http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-17905 Let’s Be Clear About This! Wed, 05 Sep 2007 13:45:19 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-17905 [...] it, then the parent container will be the margin's starting point (you must also take into account collapsing margins of [...] [...] it, then the parent container will be the margin’s starting point (you must also take into account collapsing margins of [...]

]]> By: Paul OB http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-14701 Paul OB Wed, 08 Aug 2007 08:23:24 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-14701 Hi Chris, Thanks for your comments and I have to agree that margin collapse works against us most of the times and would possibly be easier to handle if margins didn't collapse at all. Vertical centering is also a sore point and you have to jump through many hoops to achieve an effect that is easy with a table. There are methods but nothing straight forward. Here's an example: http://www.pmob.co.uk/pob/vertical-center1.htm I think someone was napping and they missed out how to vertically center elements when writing the specs. :) Hi Chris,

Thanks for your comments and I have to agree that margin collapse works against us most of the times and would possibly be easier to handle if margins didn’t collapse at all.

Vertical centering is also a sore point and you have to jump through many hoops to achieve an effect that is easy with a table. There are methods but nothing straight forward.

Here’s an example:

http://www.pmob.co.uk/pob/vertical-center1.htm

I think someone was napping and they missed out how to vertically center elements when writing the specs. :)

]]> By: Chris http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-14671 Chris Tue, 07 Aug 2007 23:10:14 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-14671 Two biggest complaints about CSS: 1. This retarded margin collapsing bs. 2. Not being able to easily center vertically. With that out of the way, your writing style is nice and easy to follow. Two biggest complaints about CSS:

1. This retarded margin collapsing bs.
2. Not being able to easily center vertically.

With that out of the way, your writing style is nice and easy to follow.

]]> By: The Positive Side of Negative Margins http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-14108 The Positive Side of Negative Margins Wed, 01 Aug 2007 13:28:44 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-14108 [...] construct a number of paragraphs that all have a 20px top and bottom margin. You may recall from my collapsing margin article that adjacent margins of static elements will collapse into one margin. So each paragraph [...] [...] construct a number of paragraphs that all have a 20px top and bottom margin. You may recall from my collapsing margin article that adjacent margins of static elements will collapse into one margin. So each paragraph [...]

]]> By: johno http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-11121 johno Fri, 22 Jun 2007 15:57:32 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-11121 great article. I've had to explain this over and over again. I'll now just point people to this post. Thanks. great article. I’ve had to explain this over and over again. I’ll now just point people to this post. Thanks.

]]> By: itispals http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-6019 itispals Wed, 23 May 2007 06:04:18 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-6019 I have always believed good articles entices visitors and today after going through these wonderful articles, i am subscribing to your website. Keep up the good work. regards, itispals I have always believed good articles entices visitors and today after going through these wonderful articles, i am subscribing to your website.
Keep up the good work.
regards,
itispals

]]> By: Dean http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-5784 Dean Sat, 19 May 2007 17:12:51 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-5784 This is the best explanation I've seen so far on this topic -- thorough, and clearly written. Thanks, Paul. I, unfortunately, <em>have</em> been aware of this problem. A few years ago I spent countless hours battling with collapsing nested margins and floats, eventually solving it by adding a 1px border. But it was never <em>really</em> solved, because I didn't completely understand why margins collapse in specific cases and not in others. With this article, hopefully, that will change and working with margins and floats will be easier now. Thanks again Paul. I appreciate your work. This is the best explanation I’ve seen so far on this topic — thorough, and clearly written. Thanks, Paul.

I, unfortunately, have been aware of this problem. A few years ago I spent countless hours battling with collapsing nested margins and floats, eventually solving it by adding a 1px border.

But it was never really solved, because I didn’t completely understand why margins collapse in specific cases and not in others. With this article, hopefully, that will change and working with margins and floats will be easier now. Thanks again Paul. I appreciate your work.

]]> By: Paul OB http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4780 Paul OB Wed, 09 May 2007 09:41:21 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4780 Thanks Jelena, Collapsing margins are a mis-understood section of CSS and one that can cause significant layout differences if you don't account for them :) Thanks Jelena, Collapsing margins are a mis-understood section of CSS and one that can cause significant layout differences if you don’t account for them :)

]]> By: Golgotha http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4701 Golgotha Tue, 08 May 2007 21:35:29 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4701 Hey Jelena, don't feel bad, I don't think I consciously knew about it either. I'm sure I've ran into it before... Probably banged my head against the wall for 20 minutes because of it before... and then ended up emailing Paul. That's usually how I deal with these little CSS idiosyncrasies. Hey Jelena, don’t feel bad, I don’t think I consciously knew about it either. I’m sure I’ve ran into it before… Probably banged my head against the wall for 20 minutes because of it before… and then ended up emailing Paul. That’s usually how I deal with these little CSS idiosyncrasies.

]]> By: Jelena http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4699 Jelena Tue, 08 May 2007 21:12:47 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4699 Wow, such a great article, Paul! I have to say that I had no idea about till now. :blush: Wow, such a great article, Paul! I have to say that I had no idea about till now. :blush:

]]> By: Paul OB http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4694 Paul OB Tue, 08 May 2007 20:48:04 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4694 Hi Mark, Its a little widget called calipers. http://www.iconico.com/caliper/v3upgrade.aspx I've used the free version for years and can't live without it now :) I may upgrade to the paid version as it has a lot more features. Hi Mark, Its a little widget called calipers.

http://www.iconico.com/caliper/v3upgrade.aspx

I’ve used the free version for years and can’t live without it now :)

I may upgrade to the paid version as it has a lot more features.

]]> By: Golgotha http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4692 Golgotha Tue, 08 May 2007 20:30:51 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4692 Hey Paul, what's that tool you use in the screenshots to indicate the pixel widths? Hey Paul, what’s that tool you use in the screenshots to indicate the pixel widths?

]]> By: scriptygoddess » How margins work in CSS http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/comment-page-1/#comment-4674 scriptygoddess » How margins work in CSS Tue, 08 May 2007 18:36:48 +0000 http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/#comment-4674 [...] is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they [...] [...] is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they [...]

]]>