CSS: Block vs Inline vs Inline-Block

Here are the major differences without any fancy words or pictures: 

Inline: Cannot have a height, width or a vertical margin but can have horizontal margin. Behaves much like floating left.

Block: Can have a height, width and margin. Takes up the entire width and pushes the successive content to next line.

How about Inline-Block? For that, let's understand why the above two display modes are used:

Inline is a display mode that is to be used in a sentence. For instance, if you have a paragraph and want to highlight a single word, you would wrap the particular word with an em or a span tag. It makes sure that the word stays in the same line, as span and em tags are set to display: inline by default. But if you want to use properties like height for the em or span tag, you need to make it display: inline-block to use the properties, and yet keep them on the same line.

Container-type elements (like <div>, <article>, <p>, etc.) are set as block-level elements by default, so the computed value of the display property for these is “block”. All headers (<h1>, <h2>, etc.), even though they generally only contain text content, are likewise block elements by default.

On the other hand, elements that are used to append with content are inline elements. That is, their computed display value is “inline”. These are elements like <span>, <em> and <cite>.

Multiple CSS Transforms on single element

I wanted to rotate an element in CSS and also wanted to mirror it. I thought of flipping the element, wrapping it with another div and then rotating the div. I found that I could do this in a single step by applying multiple transforms on a single element. Here's the syntax (vendor prefixed):

transform:rotate(-45deg) scale(-1, 1);
-ms-transform:rotate(-45deg) scale(-1, 1);
-webkit-transform:rotate(-45deg) scale(-1, 1);

Similarly, you can combine multiple css transformations. Got suggestions/improvements? Do comment below.

How to count the number of li (list elements) inside ul (unordered list) using Javascript

Yesterday, I was trying to count the number of list elements inside an unordered list. I came up with the following code:

var ul = document.getElementById("myul");
var liNodes = [];
 
for (var i = 0; i < ul.childNodes.length; i++) {
 if (ul.childNodes[i].nodeName == "LI") {
  liNodes.push(ul.childNodes[i]);
 }
}