2012年10月15日月曜日

margin・paddingの表記　練習問題

marginとpaddingの設定が
教科書の表記(Windows DreamWeaver8) と
教室のDreamweaver(Mac DreamWeaver8) で異なるので注意。

例えば、divボックスの名前がsampleだったとすると

↓これと 
 ↓これは同じもの
.sample{
margin-top:10px;
margin-bottom:20px;
margin-left:30px;
margin-right:40px;
}		 .sample{
margin:10px 40px 20px 30px;
/*上、右、下、左*/
}

問題1

↓これと 
 ↓これを同じにしましょう
.sample{
margin-top:15px;
margin-bottom:10px;
margin-left:30px;
margin-right:20px;
}		 .sample{
margin: (　　)px (　　)px (　　)px (　　)px;
/*上、右、下、左*/
}

margin: (15)px (20)px (10)px (30)px;

法則
・値を1つ指定した場合は指定した値が[上下左右]のmargin
・値を2つ指定した場合は記述した順に[上下][左右]のmargin
・値を3つ指定した場合は記述した順に[上][左右][下]のmargin

では
問題2-1
↓これと 
↓これを同じにしましょう
.sample{
margin-top: 0px;
margin-bottom:0px;
margin-left:35px;
margin-right:35px;
}		 .sample{
margin: (　　)px (　　)px;
/*上下、左右*/
}
margin: (0)px (35)px;

問題2-2
↓これと 
↓これを同じにしましょう
.sample{
margin-top: 10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}		 .sample{
margin: (　　)px ;
/*上下左右*/
}
margin: (10)px ;

問題2-3
↓これと 
↓これを同じにしましょう
.sample{
margin-top: 20px;
margin-bottom:10px;
margin-left:35px;
margin-right:35px;
}		 .sample{
margin: (　　)px (　　)px (　　)px;
/*上、左右、下*/
}

margin: (20)px (35)px (10)px;

問題3-1
↓これと 
↓これを同じにしましょう
.sample{
margin-top: (　　)px;
margin-bottom:(　　)px;
margin-left:(　　)px;
margin-right:(　　)px;
}


.sample{ 
margin-top: (10)px; 
margin-bottom:(10)px; 
margin-left:(5)px; 
margin-right:(5)px; 
}
 .sample{
margin: 10px 5px;
/*上下、左右*/
}

問題3-2
↓これと 
↓これを同じにしましょう
.sample{
margin-top: (　　)px;
margin-bottom:(　　)px;
margin-left:(　　)px;
margin-right:(　　)px;
}

.sample{ 
margin-top: (5)px; 
margin-bottom:(10)px; 
margin-left:(15)px; 
margin-right:(15)px; 
}


 .sample{
margin: 5px 15px 10px;
}

問題3-3
↓これと 
↓これを同じにしましょう
.sample{
margin-top: (　　)px;
margin-bottom:(　　)px;
margin-left:(　　)px;
margin-right:(　　)px;
}


.sample{ 
margin-top: (3)px; 
margin-bottom:(25)px; 
margin-left:(20)px; 
margin-right:(5)px; 
}
 .sample{
margin: 3px 5px 25px 20px;
}

問題3-4
↓これと 
↓これを同じにしましょう
.sample{
margin-top: (　　)px;
margin-bottom:(　　)px;
margin-left:(　　)px;
margin-right:(　　)px;
}


.sample{ 
margin-top: (8)px; 
margin-bottom:(8)px; 
margin-left:(8)px; 
margin-right:(8)px; 
}
 .sample{
margin: 8px;
}