What does the display property in CSS mean? How to use it? "Sample Summary"

We are in the front-end development of the Web page, in order to make the site visually more beautiful, the effect is more rich, the powerful nature of CSS is essential. So here's a very important property, CSS display property. Then some novice may ask, what is the meaning of display in CSS? How does CSS display work?

This article will give you a detailed introduction of CSS display properties of the specific use, I hope to solve the questions. (For the sake of understanding this article, it is recommended to read my article "How is the HTML element differentiated?"). "There are specific descriptions of block-level elements and inline elements."

First I give you a list of CSS display common values: none, block, inline, Inline-block

Next we use the specific code example to one by one detailed CSS display property usage.

First, the CSS Display block property specific examples of the introduction

<! DOCTYPE html>
The above code is accessed through the browser, effect 1:


We comment out the Display:block attribute in the a tag, and its effect is 2:


So you can see from the comparison of Figure 1 and Figure 2, in Figure 1 because the Display:block property is set, the element block in a can display the width height and the internal and external margin settings. In Figure 2, only the display block attribute is removed, which causes all element blocks not to be set to a wide height.

That is, the display block property sets the inline element to a block-level element, and then sets its width-height and left-and-right internal and external margins padding and margin. This property can then be used to achieve the effect we want.

Second, the CSS display none property specific examples are introduced

<! DOCTYPE html>
Effects such as 3:



As you can see from Figure 3, we've set a display:none for a, and after that, all of its elements are hidden from display. So it's clear that the display hides the property value shown as the None property. Display none is usually used in the design of the one or two-level column in the navigation bar.

Third, CSS display inline property introduction

<! DOCTYPE html>
Effects such as 4:


As you can see from Figure 4, the CSS display inline property is the ability to turn an element into an inline element, which is an inline element, and there are no line breaks before or after the element.

Four, CSS display Inline-block property Introduction

As the name implies, the Inline-block attribute must be an attribute that combines the inline and block properties, meaning that this property can be displayed as a block element in the inline element. You can make the specified display within the same line, and you can set the width and height of its elements.

 This article is about the specific usage of CSS display properties, including examples of none, block, inline, and inline-block. Have a certain reference value, hope to have a friend in need to help.