The difference between inline, block and Inline-block _css

Source: Internet
Author: User

When we use Firbug to browse other people's websites, we find that designers use inline-block in many places. We all know that inline is a declaration div is an inline object, block is a declaration of the object, then what the Inline-block meaning, that is, inline and block. Next, let's take a test to understand the difference and role of the three: 1 2 3 4 5 6 7 8 9 (+) < html xmlns = "Http://www.w3.org/19 99/xhtml "> < head > < meta HTTP-EQUIV =" Content-type "Content =" text/html; Charset=utf-8 "/> < title >inline, block, Inline-block difference </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 >

We find that the inline object inline it is not used to set the height and width, which causes it to widen and become larger because of the +padding of the inner element. Observe the front and back elements of the inline object we'll find that inline not only has a single line, but other elements follow.

Block object blocks can be set wide, but its actual width is itself wide and high +padding. Look at the front and back elements of the block and we'll see that the block takes up a separate line.

When we see this, we think, what if we want the div to be wide, and we don't want it to monopolize the line.

This time we need to use Inline-block, and then look at the above figure, we will find that Inline-block is a block of the wide and high characteristics and has the inline characteristics of the peer element.

Finally, the padding of the IE6/7 under the inline is not affected by the wide height. 

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.