Tuesday, March 24, 2015

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>.

Saturday, January 31, 2015

Changing the eraser size in Illustrator

Changing the brush size of the eraser in Adobe Illustrator didn't seem an easy task at first. So for those who faced the same problem, read on.

You can simply double click on the eraser icon in the toolbar to bring up this menu:

The eraser tool options in CS6

For a quicker change of eraser size, use the [ and ] keys while having the eraser tool selected.

Follow this blog for more tips. Please do share this article if you found it useful.