Ajaxload - Ajax loading gif generator. Mdn. Pure. CSS display: inline-block: why it rocks, and why it sucks. Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block. Problems with float The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt. Enter display: inline-block This is where the magic value inline-block for the display property comes into play. 01. 02. ul#display-inline-block-example, 03. ul#display-inline-block-example li { 04. /* Setting a common base */ 05. margin: 0; 06. padding: 0; 09. ul#display-inline-block-example li { 10. display: inline-block; 11. width: 100px; 12. min-height: 100px; 13. background: #ccc; 15. 17. 18. 19. 20. 21. 1.
Understand CSS Margins Collapsing. Understanding how CSS margins collapse can make a web developer life easy. lets take a look how margin collapsing works in CSS. To better understand this article reader should have basic understanding about CSS Box Model. Horizontal and Vertical Margins Collapsing Horizontal margins between all types of boxes never collapse. vertical margins collapse between certain boxes.
To understand how vertical margins collapse lets start with a basic html and CSS example. XHTML Code CSS Code Browser Result Adjacent Elements With Positive Margin Vertical adjoining margins collapses. Adjacent Elements With Positive and Negative Margin If two elements has positive and negative vertically adjoining margins than resulting margin would be the sum of both. If the sum of both margins is a negative value than later element will overlap over the first element.
Parent and Child Margin Collapsing if parent element has no border or padding than parent and child margins collapse and maximum of both become resulting margin.