margin --Set margin --Introduction to CSS [CSS3 compatible]

To set the margin, set margin in the stylesheet (CSS). Margin is the space that can be created outside the block.

Set margin

<div style = "margin: 10px; background: #eef">
  Set margin
</div>

<div style = "margin: 10px; background: #eef">
  Set margin
</div>

<div style = "margin: 10px; background: #eef">
  Set margin
</div>

Margins are the spacing outside the block, and padding is the spacing inside the block.

Margin effect

The effect of the margin is to make the characters easier to read by creating an appropriate spacing between the blocks.

Set margins for each of top, right, bottom, and left

You can set margins for each of the top, right, bottom, and left. The order of setting is top, right, bottom, left.

Set margins to top, right, bottom, left

<div style = "margin: 10px 20px 30px 40px; background: #eef">
  Set margins to top, right, bottom, left
</div>

Set margins on the top, bottom, left and right

Margins can be set for each of the top, bottom, left and right. The order of setting is up / down, left / right.

Margins are set up, down, left and right respectively

<div style = "margin: 10px 30px; background: #eef">
  Margins are set up, down, left and right respectively
</div>

Set margins only on the top, only on the right, only on the bottom, and only on the left

You can use "margin-top", "margin-right", "margin-bottom", and "margin-left" to set margins only on the top, only on the right, only on the bottom, and only on the left.

Set margin only above

Set margin only to the right

Set the margin only below

Set margin only to the left

<div style = "margin-top: 10px; background: #eef">
  Set margin only above
</div>
<div style = "margin-right: 10px; background: #eef; text-align: right;">
  Set margin only to the right (text right justified)
</div>
<div style = "margin-bottom: 10px; background: #eef">
  Set the margin only below
</div>
<div style = "margin-left: 10px; background: #eef">
  Set margin only to the left
</div>

Offsetting upper and lower margins

The margin below the top element and the margin above the bottom element are offset. Note that "margin-bottom: 20px;" and "margin-top: 10px;" are not added to 30px, but are offset to the larger 20px.

Set margin

<div style = "margin-bottom: 20px; background: #eef">
  Set margin
</div>
<div style = "margin-top: 10px; background: #eef">
  Set margin
</div>

For the left and right margins, that doesn't happen.

<div>
  <button style = "margin-right: 20px;">
    button
  </button>
  <button style = "margin-left: 10px;">
    button
  </button>
</div>

Left and right automatic margins for centering blocks

As a technique for centering the block, set "auto" for the left and right margins.

Centered block

<div style = "margin: 0 auto; width: 200px; background: #eef;">
  Centered block
</div>

Specify margin percentage

Margins can also be specified as percentages. This is useful when you want to make a gap so that it is exactly 100%overall.

Left block

Right block

<div style = "display: flex">
  <div style = "width: 49%; margin-right: 1%; background: #eef;">
    Left block
  </div>
  <div style = "width: 49%; margin-left: 1%; background: #eef;">
    Right block
  </div>
</div>

HTML・CSS Writing 2022