My understanding is as follows (though I am happy to be corrected). Inline elements do not have a width property, and so the “auto” cannot be calculated. Block elements have a width property, so the width of the “auto” can be calculated. Inline-block elements have an outside which acts inline, but an inside which acts … Read more
Try… body { margin: 0; padding: 0; } jsFiddle. Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer’s Reset Reloaded.
Try to use this CSS: /* Apply this to your `table` element. */ #page { border-collapse: collapse; } /* And this to your table’s `td` elements. */ #page td { padding: 0; margin: 0; }
The cleanest way to fix this is to apply the vertical-align: top property to you CSS rules: #div1 div { width:30px;height:30px; border:blue 1px solid; display:inline-block; *display:inline;zoom:1; margin:0px;outline:none; vertical-align: top; } If you were to add content to your div‘s, then using either line-height: 0 or font-size: 0 would cause problems with your text layout. See … Read more
I know this isn’t a very timely answer but there is a way to solve this. You could add a “spacer” element inside the element positioned absolutely with a negative bottom margin and a height that is the same size as the negative bottom margin. HTML: <div id=”container”> <div class=”spacer”></div> </div> CSS: // same container … Read more
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div. #container { border: 1px solid black; display: inline-block; padding: 50px; } .MtopBig { margin: 75px auto; position: … Read more
As mentioned, this behavior is specified in section 10.6.2 of CSS2.1, and has remained unchanged from CSS2. Block boxes are stacked vertically from top to bottom in normal flow. Furthermore, vertical margins may collapse, and only do so under certain circumstances (in your demo, the border on the parent element will prevent any margins on … Read more
Thank you all for your answers, @gaurav5430 posted a link with a very precise definition that I would like to summarize into this answer. As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to … Read more
This is actually not that uncommon. It’s because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line. The easiest solution to this is to simply use display:block; to turn the … Read more
This is how CSS works according to W3C: In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. More specific to your case … Read more