手順

  1. HTMLとCSSを準備する。
  2. HTMLに、divタグで適当な文字を書く。
  3. CSSでdivタグの背景の色を赤に、5pxの実線で青の枠線を書く。
  4. paddingで隙間を開ける。その際、値が1つ~4つの時の動きの違いに注意する。

回答例

https://www.youtube.com/embed/Qu7sxw3JTJI?si=LSde4ZB6ulpNlzqj

作成したコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </div>
</body>

</html>
div {
    background-color: red;
    border: 5px solid blue;
    /* padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px; 
    padding:上下左右;
    padding:上下 左右;
    padding:上 左右 下;
    padding:上 右 下 左;
    */
    /* padding: 20px; */
    /* padding: 20px 50px; */
    /* padding: 10px 40px 80px; */
    padding: 10px 30px 60px 120px;
}