プログラミング

HTML&CSSを学ぼう#14 余白 | AtelierAPOLLO

余白

要素に余白を作りたいときはpaddingを使います

padding: 数値;

と書くと上下左右すべての方向に余白ができます

paddingの方向

特定の方向にのみ余白を指定するときは

 

padding-top: 数値;
padding-bottom: 数値;
padding-left: 数値;
padding-tight: 数値;

を使います

padding-topは上方向の余白
padding-bottomは下方向の余白
padding-leftは左方向の余白
padding-rightは右方向の余白になります

paddingの省略した記述方法

たとえば

 

.logo {
 padding: 20px 10px 20px 10px;
}

と記述するとtop,right,bottom,leftの順番で指定できます
topは20px,rightは10px,bottomは20px,leftは10pxですね

 

.logo {
 padding: 20px 10px;
}

と記述した場合はtopとbottom、rightとleftの順番で指定できます
topとbottomは20px,leftとrightは10pxですね

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA