When we use firbug to browse other websites, we will find that designers use inline-block in many places. We all know that inline declares that DIV is an inline object and block is a block object. What does inline-block mean? Next, let's test the differences and functions of the three:
| 12345678910111213141516171819202122 | <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> Differences Between inline, block, and inline-block </title><style>.a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}.b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}.c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}</style></head><body><span class="a">inline</span>inline<span class="b">block</span>block<span class="c">inline-block</span>inline-block</body></html> |
We found that it is useless to set the height and width for the inline object inline, which is caused by the internal element width and height + padding. Observe the front and back elements of the inline object and we will find that inline is not only exclusive to a row, but other elements will keep behind it.
Block object block can be set to a wide height, but its actual width and height are its own width and height + padding. Observe the front and back elements of the block and we will find that the block occupies a single row.
When we see this, we will think, what if we need a div with a width and height, and do not want it to exclusive a row?
At this time, we need to use the inline-block. Then, we will find that the inline-block has the wide and high features of the block and has the characteristics of the same element of the inline.
Finally, I would like to remind you that padding in IE6/7 has no effect on the width and height of inline. See:
My front-end: differences between inline, block, and inline-block
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
