takiji13 https://blog.hatena.ne.jp/takiji13/ あめみか https://takiji13.hatenablog.com/ ブログ ブログ-カスタマイズ marginは要素の外側の余白を指定し、paddingは要素の内側の余白を指定します。 またmarginやpaddingには略記のショートハンドがあります。 このmarginやpaddingの違いやショートハンドは言葉だけではちょっとわかりづらい。 そこで図解してみます。 以下では黒枠が背景の左隅を表す線、赤枠がテキストを囲む要素(borderやbackgroundなど)の線だとして、下図のように画面左隅に要素が配置されているものとして図示しています。 marginのショートハンド margin: 上下左右px; margin: 上下px 左右px; margin: 上px 左右px 下px;… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftakiji13.hatenablog.com%2Fentry%2F2017%2F01%2F15%2F145917" title="【図解】marginとpaddingの違いと4つのショートハンド - あめみか" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn.pixabay.com/photo/2015/10/12/15/23/stone-984483__340.jpg Hatena Blog https://hatena.blog 2017-01-15 14:59:17 rich https://takiji13.hatenablog.com/entry/2017/01/15/145917 1.0 100%