HTML・CSS Writing 2022

[HTML5] div tag --Create block element

You can use the div tag to create block elements.

<div>
  Block element
</div>

100%width is the default for block elements

100%width is the default for block elements.

<div style = "background: pink;">
  Block element
</div>

Let's place two block elements in a div. It grows 100%horizontally and becomes 2 lines.

<div style = "background: pink;">
  Block element 1
</div>
<div style = "background: green;">
  Block element 2
</div>

Block elements can set width, height, and top and bottom margins

Block elements can have width, height, and top and bottom margins.

<div style = "background: pink; magin-top: 10px; margin-bottom: 10px; width: 80%; height: 300px;">
  Block element 1
</div>
<div style = "background: green;">
  Block element 2
</div>

The same is true for inline block elements. On the other hand, inline elements cannot have width, height, and top and bottom margins.

If you want to set margins, heights, and widths, use block elements, inline block elements, and flex elements instead of inline elements.

CSS to set block elements

The CSS that sets the block element is "display: element type;". The default for div tags is block elements, but you can change them.

<div style = "display: block;">
  Block element
</div>
<div style = "display: inline-block;">
  Inline block element
</div>
<div style = "display: inline;">
  Inline element
</div>
<div style = "display: flex;">
  Flex element
</div>

Block elements other than div tags

It is a frequently used tag that becomes a block element other than the div tag.

• Heading tag --h1, h2, h3, h4, h5, h6
• p tag
• ul tag

How to use block elements, inline block elements and flex elements properly?

How to use block elements, inline block elements and flex elements properly?

1 row 1 column is a block element

When it can be represented by 1 row and 1 column, use block elements.

<div style = "background: pink;">
  Block element 1
</div>

Multiple rows and columns are block elements

Block elements are also used for multiple rows and columns.

<div style = "background: pink;">
  Block element 1
</div>
<div style = "background: green;">
  Block element 2
</div>

1 row and multiple columns are flex elements

For one row and multiple columns, use the flex element.

<div style = "display: flex;">
  <div style = "width: 50%; background: pink;">
    Column 1
  </div>
  <div style = "width: 50%; background: green;">
    Column 2
  </div>
</div>

Introduction to Flex Layout explains in detail.

Multiple rows and columns are flex elements

For multiple rows and columns, use the flex element and specify "flex-wrap: wrap;".

<div style = "display: flex; flex-wrap: wrap;">
  <div style = "width: 50%; background: pink;">
    Row 1 Column 1
  </div>
  <div style = "width: 50%; background: green;">
    Row 1 column 2
  </div>
  <div style = "width: 50%; background: blue;">
    Row 2 column 1
  </div>
  <div style = "width: 50%; background: red;">
    Row 2 column 2
  </div>
</div>

Multi-line layout with flex layout Explained in detail in the introduction.

Inline block elements are unlikely to be used.

How to make a button with

div tag?

To create a button using the div tag, think as follows.

・ Determine the width

・ If the right margin and the left margin are set to automatic, it will move toward the center.

Determine the width

First, decide on the width of the button. 400px on a computer screen. On a smartphone screen, "from 100%width to 30px smaller".

<div style = "width: 400px; background: pink;">
  Button for PC
</div>

<div style = "width: calc (100%-30px); background: pink;">
  Button for smartphone
</div>

Automatic left and right margins

If you set the left and right margins to automatic, the button will move to the center.

<div style = "width: 400px; margin-left: auto; margin-right: auto; background: pink;">
  Button for PC
</div>

<div style = "width: calc (100%-30px); margin-left: auto; margin-right: auto; background: pink;">
  Button for smartphone
</div>