<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Basic CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>こんにちは！</p> <p>こんにちは！</p> </body> </html>
@charset "utf-8"; body { margin: 0; } p { background-color: pink; margin: 0; width: 160px; height: 160px; }
幅の最大値、最小値を設定
body { margin: 0; } p { background-color: pink; margin: 0; width: 50%; /* max-width: 400px; */ min-width: 400px; height: 160px; }
p { background-color: pink; margin: 0; width: 160px; height: 160px; /* border-width: 8px; */ /* border-style: solid; */ /* border-color: blue; */ border-top-width: 8px; border-top-style: dashed; border-top-color: blue; border-bottom-width: 8px; border-bottom-style: double; border-bottom-color: blue; }
@charset "utf-8"; body { margin: 0; } p { background-color: pink; margin: 0; width: 160px; height: 160px; /* border-width: 8px; */ /* border-style: solid; */ /* border-color: blue; */ /* border: 8px solid blue; */ /* border-top: 8px dashed blue; */ /* border-bottom: 8px double blue; */ border-style: solid; border: 8px none blue; }
@charset "utf-8"; body { margin: 0; } p { background-color: pink; /* margin: 0 0 0 16px; */ /* margin: 0; */ /* margin: 0 0 0 auto; */ margin: 0 auto; width: 160px; height: 160px; border: 8px solid blue; padding: 16px; }
縦方向のマージンは上下方向は、相殺される
@charset "utf-8"; body { margin: 0; } p { background-color: pink; /* margin: 16px 0 0; */ margin: 16px 0; }
padding, borderを width, heightに含めて計算する
<body> <p>こんにちは！</p> <p>こんにちは！</p> <p>こんにちは！</p> </body>
p { background-color: pink; margin: 16px 0 0; width: 400px; height: 80px; border: 8px solid blue; padding: 8px;; box-sizing: border-box; }
@charset "utf-8"; body { margin: 0; } p { background-color: pink; margin: 0; width: 160px; height: 80px; /* overflow: hidden; */ overflow: scroll; }
@charset "utf-8"; body { margin: 0; } p { background-color: pink; margin: 16px; width: 160px; height: 160px; /* box-shadow: 8px 8px gray; */ /* box-shadow: 8px 8px 8px gray; */ box-shadow: 0 0 8px gray; }
<body> <p>こんにちは！</p> <p>こんにちは！</p> <p>こんにちは！</p> </body>
@charset "utf-8"; body { margin: 0; } h1 { background-color: skyblue; margin: 0; font-size: 16px; font-weight: normal; text-align: center; } p { background-color: pink; margin: 0; font-weight: bold; text-align: right; }
単位なしで使われることが多い
p { background-color: pink; margin: 0; line-height: 1.6; }
@charset "utf-8"; body { margin: 0; color: blue; border: 8px solid blue; } h1 { background-color: skyblue; margin: 0; /* color: blue; */ border: inherit; } p { background-color: pink; margin: 0; line-height: 1.6; }
body { margin: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
@charset "utf-8"; body { margin: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } section { border: 1px solid lightgray; width: 400px; margin: 32px auto 0; border-radius: 8px; } h1 { background-color: skyblue; margin: 0; } p { background-color: pink; margin: 0; line-height: 1.6; }
<section> <h1>ドットインストール</h1> <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p> </section>
section { border: 1px solid lightgray; width: 400px; margin: 32px auto 0; border-radius: 8px; } h1 { background-color: skyblue; /* margin: 0 auto; */ margin: 0; /* margin: 8px; */ padding: 8px; text-align: center; } p { background-color: pink; /* margin: 8px; */ margin: 0; padding: 8px; line-height: 1.6; }
デフォルトのマージンのクリアは大事
@charset "utf-8"; body { margin: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } section { border: 1px solid lightgray; width: 400px; margin: 32px auto 0; border-radius: 8px; } h1 { /* background-color: skyblue; */ /* outline: 1px solid red; */ margin: 0; padding: 8px; text-align: center; border-bottom: 1px solid lightgray; font-size: 20px; } p { /* background-color: pink; */ margin: 0; padding: 8px; line-height: 1.6; }