Advanced Search

Return to Snippet

Revision: 4931
at January 29, 2008 16:18 by 1man
Initial Code 
#containerDiv {
width: 700px;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
}
#innerDiv {
width: 200px;
margin: 20px 0 0;/*You can now apply a top margin without trouble*/
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
A very annoying 'bug' can occur when you are applying a top margin to an element inside a container. The inner elements margin seems to "leak" out of the top of the container. This pushes the container down, and looks very messy if you have a background applied.

Note: This is NOT and bug! Yay etc..

A quick fix is to add a padding of 1px, and a margin of -1px. Or you could add a border to the container.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS Collapsible Margins Fix (margin-top)

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS