- This topic is empty.
January 25, 2013 at 8:11 pm #42259
If I have a child element with some margin established, its parent won’t return its actual height ( wont’t count the child’s margin, I mean) when using the command .outerHeight(), unless I establish either (not all) of the following properties to the parent div:
Why is that? Which of these properties should I use (..and why ‘-‘)? Should I do something different? Ty in advance. Here’s the code:
So, if I put either of those css properties i talked about earlier(in #login selector) it would work out fine , but not sure why ‘-‘. In this example the form element(.form selector) has a margin that causes its div parent not to calculate its height right.January 25, 2013 at 9:56 pm #122361
That’s correct behavior. And for the record, padding-top would also work. The child’s margin extends outside of the parent unless the parent is given a new block formatting context. You’ve hit most of the ways to do that. I personally would use the overflow: hidden;January 25, 2013 at 10:43 pm #122363
Ty wolfcry911, but what do you mean by “new block formatting context”, and how do these properties accomplish that?
Just to be sure: the property “display: block” doesn’t fix my problem, so this property doesn’t accomplish the “new block formatting context” criterion you said?
Ty =]January 26, 2013 at 8:02 am #122390
this might help explain it:
https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_contextJanuary 26, 2013 at 12:10 pm #122400neerukoolParticipant
If you want everything of the div to be calculated, pass value ‘true’.
so your code will look like: .outerwidth(true) or .outerHeight(true).
It will calculate the margin too. :)January 26, 2013 at 1:20 pm #122404
no it won’t. The parent doesn’t have the margin and doesn’t encompass the child’s margin – unless you establish a new BFCJanuary 27, 2013 at 12:08 pm #122493
Ty you all guys, think I have finally figured it out.
I tried checking the website you suggested wolfcry911, but couldn’t grasp much from there, so i tried searching some other sites (many.. so can’t ref them all here) besides some of the css official documentation (http://www.w3.org/TR/CSS2/box.html) (http://www.w3.org/TR/CSS2/visuren.html) and the conclusion I had figured out (I think) is:
Since I dont include padding, border, or anything else before the form’s margin, **its margin will collapse with the #login’s margin**, so if I had included a “padding: 1px” property in #login, it would also work out, since the collapse wouldn’t be allowed anymore =]. That is also the reason why the ‘border’ property I mentioned earlier would also work.
As for the display properties, it’s as wolfcry911 said: they create a new block formatting context, **which doesn’t allow margin collapsing either**, and that’s why it works: the form’s margin remains inside the #login block, instead of out of it, collapsed with its own margin, so the outerHeight can be calculated as I expected =]
In the end, it was all about “margin collapsing” properties, which by this day I’d never heard about ‘-‘
Ty again guys o/
- The forum ‘CSS’ is closed to new topics and replies.