CSSには上下右左というそれぞれちがったプロパティーをまとめて設定することができます。例えば、margin-top
margin-bottom
margin-left
margin-right
などmarginに関して４つの部位にわけて設定することができます。しかし、
margin: 10px 20px 35px 5px;
のように違う箇所をまとめて設定することができるのですが、その位置関係をすぐに忘れてしまう...。その場所の関係だけでも頭にたたき込んでおくとよいです。 borderにしろ、paddingにしろ４つの位置関係が関わるものはすべて共通しています。ここではmarginを例にして説明しますが、
- margin: 10px; この場合は４方向すべてを10pxで設定。
- margin: 10px 20px; この場合はmargin: <上下> <左右>;で設定。
- margin: 10px 20px 30px; この場合はmargin: <上> <左右> <下>;で設定
- margin: 10px 20px 30px 40px; この場合はmargin: <上> <右> <下> <左>;の設定。
