In today’s morning reading class, the author will introduce the related attributes of Display, mainly involving the following contents:

  • display: none vs. visibility: hidden
  • display: block
  • display: inline
  • display: inline-block

Display: None vs. Visibility: Hidden

We have three red, blue, and green squares, as shown in the following code:

#box-1 {
  width: 100px;
  height: 100px;
  background: red;
}

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
}

#box-3 {
  width: 100px;
  height: 100px;
  background: green;
}

div {
  display: inline-block;
}

body {
  background: #efefef;
}Copy the code

<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>Copy the code

First we use the display: None attribute to hide the blue square, as shown in the following code:

#box-2 {
  display: none;
  width: 100px;
  height: 100px;
  background: blue;
}Copy the code

Using Display: None, as shown in the image above, we can see that the blue square is “deleted” from it and the empty space in the middle is filled by the green square.

Next we use the visibility: hidden property to hide the blue square, as shown in the following code:

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
  visibility: hidden;
}Copy the code

As we can see from the above image, using Visibility: Hidden, we have “Hidden” the blue square, leaving the middle space vacant.

Block vs. Inline

Block elements fill the parent element’s content area by default and cannot be surrounded by other elements. The most common block-level elements are

,

,

    , etc.

An Inline element generates an element box within a line of text without breaking the line. The most common inline elements are: ,,. First we don’t have CSS Html code in the next section:

<body>
  <p>I'm a paragraph</p>
  <p>I'm a paragraph too</p>
  <span>I'm a word</span>
  <span>I'm a word too.</span>
</body>Copy the code

From the picture above, we can see that:

Two <p> elements take up two lines and two <span> elements take up one line, so each Html element has a default display attribute :block or inline.

Here’s a summary of the difference between Block and Inline:

Block

  • By default, 100% of the parent element area is filled
  • Each element is on a row
  • You can set the width and height properties
  • It can contain other block-level elements or inline elements.

The following code is illustrated:

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}Copy the code

From this we can see that the width and height of the element are set, and each red square has its own row, as shown below:

inline

  • Take up space as needed
  • Continuous line, side by side display
  • Attributes like width, height, and top-bottom margin don’t work
  • Can be the parent of other inline elements.

As shown in the following code, we change the default property of the <p> tag display to make it an inline element:

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
  display: inline;
}Copy the code

As we can see from the figure above, the <p> elements become inline elements, and the width and height we set do not matter, so the three <p> elements are in a row.

Display: Inline-block

In some cases, Inline elements and block-level elements do not meet our design requirements, so with the inline-block attribute, we can infer from the attribute name that it combines some of the characteristics of both.

We can think of this as an in-line property, we can set width and height or we can think of it as a block-level element, no line breaks.

To understand this property, let’s start with a piece of code like this:

p {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}Copy the code

From the illustration above, we can see that by using this property, we have given the row elements a width and height property.

section

That’s all for today’s morning reading. Hopefully, you’ve understood these properties of display.

More exciting content, please pay attention to the wechat “front-end talent” public number!