4.display属性&border属性

ブロックレベル要素vs行内要素

≪ブロック・レベル要素|Block Level Elements|emdw≫:自分の属する領域のすべての幅を占めてブロックを形成します.
(ex.div、p、h 1等)
行の要素:
自分の必要な空間だけを占める.

属性の表示

displayプロパティは、要素をブロックと行内の要素のどちらに処理するかを定義します.
ブロックレベル要素divを行内で処理する場合

div{ 
	display: inline;
}

ブロックレベルで行内の要素aを処理する場合.

a{
	display: block;
}

属性値をinline行として処理します.ブロック・レベルで処理します.inline-block行ですが、ブロックレベル要素を追加するプロパティとして処理されます.表示されません.

borderプロパティ

borderプロパティを使用して、要素が占める領域に枠線を描画します.
borderプロパティでは、枠線の厚さ、形状、サイズなどをプロパティ値で同時に指定できます.これらのプロパティは「ショートカットプロパティ」と呼ばれます.
span {
border: 2px solid greed;
}

=>2 pxの厚い直線(solid)の緑の枠を描いてください.

borderプロパティのサブプロパティ

borderプロパティで指定した値を個別に指定することもできます.
各プロパティは次のとおりです.
属性名属性値例border-colorcolor定義方式と同じborder-widthin、medium、thoughなどのキーワード、またはpx、em、remなどの単位border-stylnone(デフォルト)、solid(直線)、dotted(破線)、dashed(長破線)など
行の要素の高さと幅は任意に指定できません.
ただし、ブロックは高さと幅を任意に指定できます.