Difference between CSS display inline, inline-block, and block

11:30:00 by Sanjeev Dhiman 0 Comments A⁺ a^-

All element on web showing as rectangular box. The display property for that how the rectangular box behaves.

display: inline;        /* Default of all elements, unless UA stylesheet overrides */



  display: inline-block;  /* Characteristics of block, but sits on a line */


  display: block;         /* UA stylesheet makes things like  and  block */


  display: run-in;        /* Not particularly well supported or common */ 

 display: none;          /* Hide

inline

An inline element will accept margin and padding, but the element still 
sits inline as you might expect. Margin and padding will only push other
 elements horizontally away, not vertically.

see in example:

inline-block

inline-block element is similar to inline both are showing in same line or with flow of text.but in  inline block we can set width and height of element it will not override  other text of any line. It make a block in perticular line with its width and height.

block
When we use display: block, the element will take up as much space as possible with it width spanning the entire width of its parent element as in here

How to make popular your blog with WordPress SEO

In this article we learn how to improve the SEO of your WordPress blog.

How to SEO WordPress

1.Permalinks

In wordpress we can set the way you want them to look. You can set your page or post title instant of post or page id. To set this you can go to

Settings -> Permalinks

You can choose the Custom Structure option and enter /%postname%/ for example. This will make your links look like http://yourdomain.com/the-name-of-your-post/. Or you can enter /%category%/%postname%/ if you want to include the name of your category in the URL. You can also add custom text or other WordPress variables.

2.Optimize your meta desciptions.

You should add meta description for every page. The search engines will check how relevant your description is to the actual content of your page so make sure that you describe only the current page and avoid adding irrelevant information in this description.

You can add description and key words in post category. Once you go to the Posts -> Categories page in your admin area, note the description field available for each category.

3. Optimize your Image.

It is essential to have the "title" and "alt" tags specified for each one of the images you use in your posts. The search engines will then know what this image is supposed to represent. Typing the title and alt tags for each image you use, however, can be a time-consuming task. Instead, you can use the handy SEO Friendly Images plugin. For more information on how to install this plugin, you can check our tutorial on How to install WordPress plugins.

3. Headings to optimize your WordPress blog.

To make your blog SEO friendly you should give your heading in heading tag like <h1></h1>.
exm. h1, h2 ,h3, h4, h5, h6.
because headings make it easier to determine the subject of the page.