CSS Web page Making Tutorial: Display property inline elements and block-level elements

Source: Internet
Author: User
Tags definition html tags valid

Article Introduction: inline (inline) elements, block-level element differences.

A: Within the line is within a line of elements, can only be placed in the row, block-level elements, is a square block, you can put anywhere on the page.

B: Plainly, inline elements are like a word; block-level elements are like a paragraph, and if not added to the definition, it will appear on its own line.
C: General block-level elements such as paragraph <p>, title D: The salient feature of block-level elements is that each block-level element is displayed from a new row, and that the following non-element also needs to be displayed on a separate line.
E:<span> belongs to an inline element in the CSS definition, while <div> is a block-level element.
For those who have learned CSS, one can understand it. But for the novice is not easy to understand, I mainly to the novice said familiar point bar!

The term "container" will make it easier to visualize their existence and use, in which the elements of the line are quite a small container, while the <div> is the equivalent of a large container, and a large container can of course be placed in a small container. <span> is a small container, so you may have a preliminary impression in your mind, if we want to fill a large container with some water. But what if I want to put some ink in it? Very simply, we put the small containers out of the ink and put it into the large container in the water is not it.

Let me give you a simple practical example:


I want to use CSS to define the style of the letter C, so we can use the <span>.


Problem causes:

We've been in the book. A very simple example of using a to make a web menu is essentially setting the height, width, and border properties of a element. For example, the following code:


Obviously, we want to set the hyperlink above to 200 pixel wide, 40 pixel high, red border, gray background, and underline.

So what exactly is the effect in the browser? The left image below is the effect in IE 6, the right image is in Firefox.

We can see that in IE 6 effect, it is the effect we want, and in Firefox, the effect is not what we want, width is not correct. What's the reason?


The reason for this is that, according to the CSS specification, each page element has a display property, used to determine the type of the element, each element has a default display property value, such as the DIV element, its default display property value is "block", become "blocks" Element (Block-level), and the default display property value of the span element is "inline", called the inline element.

div such block-level elements, will automatically occupy a certain rectangular space, you can adjust the appearance of this rectangle by setting properties such as height, width, inner and outer margins, and in contrast, inline elements like "span" do not have their own independent space, which is attached to other block-level elements, so Setting attributes such as height, width, internal and external margins, and so on in-line elements is not valid.

So what are the elements of link a, by default? The answer is "inline element", so as in the code above, set the height, width and other attributes of the A element, which is not valid, which explains the appearance of the image in Firefox, the reason.

So in IE6, why wait for the effect we want? The answer is IE by default, and does not adhere to the CSS specification, it also set a element of the height, width and other attributes. So it should be said that Firefox is compliant, and IE, by default, is not the standard interpretation method.

What needs to be explained here is that if we add a DOCTYPE directive to the page and qualify the HTML document type, then in IE it will also be interpreted by the standard CSS specification.

For example, replace the first line in the preceding code with the following:


At this time in IE see the effect, it will be the same as Firefox, that when the use of DOCTYPE instructions, IE will be in accordance with the standard way to interpret the code, so as to achieve the same effect as Firefox.

So what if you want a element to get the effect we want in the standard way, in Friefox and IE browsers?

Solving method

The method is simply to use the Display property to force the change of a element from the inline element to block-level by adding one in the CSS style of the A element:


At this time in IE, Firefox can get the effect we want, you can set the height of the width of various geometric properties.

Summary and improvement

The display property makes it easy to change the type of an element, so if the reader understands this, the actual div and span elements need to be converted to each other only through the display property.

So, no matter what HTML tags a web page has to make up, such as Div, UL, Li, p and so on, they are essentially some boxes, in the eyes of browsers, a Web page is a lot of boxes, your task is to put these boxes in accordance with your requirements in the appropriate position. As for this box is UL, Li, p or Div, all does not matter.

For example, the P tag can be fully understood as a div with some preset attribute values. For example, if you change the P tag on the page to Div, and then set some CSS properties on the div, you can be exactly the same as p. It's like, in elementary school, we learn addition and subtraction, and then we know that the essence of addition and subtraction is the same, 1-1 equals 1 + (-1), the same is true of multiplication and division.

After the real understanding of the principle, in the design, it is possible to achieve the same freedom of unrestrained.

Similarly, for web pages, as designers, in the definition of the structure and content of the page, the focus is on the structure and content of the page, in typesetting, the attention of the browser how to display the page.

We say that P tags and div tags are actually boxes that emphasize one aspect of the problem. And from another aspect--structure and content, of course, is completely different, should not, and there is no need to replace.

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.