0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSでの要素の境界線

Posted at

境界線の要素

border,margin,paddingを使う

borderの記述の仕方

border: 太さ スタイル 色;
と記述する。
(例)
border: 1px solid white;
👉太さ1px、1本線、白い線を引くことになります。

paddingの記述

paddingは上下左右4方向に指定できます。

  • padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定
  • padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
  • padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
  • padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定

marginで余白作る方法

paddingと同様にmarginも上下左右4方向に指定できます。

  • margin: 1px; [上下左右]の内側の余白をまとめて1pxに指定
  • margin: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
  • margin: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
  • margin: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定

margin-top、margin-bottom、margin-left、margin-rightを用いることで、各一方向のみの指定が可能

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?