余白
要素に余白を作りたいときは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ですね
