HTML・CSS Writing 2022

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

To set the padding, set padding in the style sheet (CSS). Padding is the space that can be created inside a block.

<div style = "padding: 10px; background: #eef">
  Set padding
</div>
<br>
<div style = "background: #eef">
  No padding
</div>

The spacing that padding can be inside the block, and the spacing that margin can be outside the block.

Effect of padding

The effect of padding is to make the text easier to read by creating proper spacing.

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

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

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

Set padding on the top, bottom, left and right

You can set padding on the top, bottom, left and right respectively. The order of setting is up / down, left / right.

<div style = "padding: 10px 30px; background: #eef">
  Padding is set up, down, left and right respectively
</div>

Set padding only on the top, only on the right, only on the bottom, only on the left

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

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

How to make the vertical position of the character exactly in the middle?

To get the vertical position of the text exactly in the middle, increase the top padding slightly. By default, the baseline of the font is the standard, so in the case of Japanese, the top is a little narrow. It is difficult to unify it in all browsers because it differs slightly depending on the font, but try to match it exactly in the middle as much as possible.

Can you see the subtle differences?

<div style = "padding: 11px 20px 10px 20px; background: #eef">
  Make the vertical position of the character exactly in the middle
</div>
<br>
<div style = "padding: 10px 20px 10px 20px; background: #eef">
  By default, the font baseline is the reference, so the top is a little narrow.
</div>