CSS ?? ? ??
??? ?? ? ??? ?????: ?? ??.
?? ??? ?? ??, ??, ???, ??? ? ?? ??? ?????.
CSS ??
?? ?? ???? ?? ??? ?? ??? 5?? ????. ? ? padding? ?? ??? ???? ???, ??? 4?? ??, ???, ??, ??? ??? ?? ???? ????.
?? ??
padding ?? ?? ??
padding-top ?? ?? ??
padding-bottom ??? ?? ??
padding- left ?? ?? ??
padding-right ??? ?? ??
<!DOCTYPE html>
<html>
<head>
<title>測試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
#all{padding: 100px;}/*設(shè)置所有內(nèi)邊距*/
#top{padding-top: 100px;}/*設(shè)置上面的內(nèi)邊距*/
#bottom{padding-bottom: 100px;}/*設(shè)置下面的內(nèi)邊距*/
#left{padding-left: 100px;}/*設(shè)置左邊的內(nèi)邊距*/
#right{padding-right: 100px;}/*設(shè)置右邊的內(nèi)邊距*/
</style>
</head>
<body>
<table border="1">
<tr>
<td id="top">我是padding-top，我設(shè)置了上邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="bottom">我是padding-bottom，我設(shè)置了下邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="left">我是padding-left，我設(shè)置了左邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="right">我是padding-right，我設(shè)置了右邊距</td>
</tr>
</table>
<table border="1">
<tr>
<td id="all">我是padding，我設(shè)置了所有內(nèi)邊距</td>
</tr>
</table>
</body>
</html>CSS ??
??? ??? ?? ??? ?????. ??? ????? ?? ?? ?? ?? ???? ?????.
??? ????? ???? ??:
?? ??
margin ?? ?? ??
margin-top ?? ?? ??
margin- Bottom ??? ?? ??
margin-left ?? ?? ??
margin-right ??? ?? ??
<!DOCTYPE html>
<html>
<head>
<title>測試外邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
#ss {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#rr {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}
</style>
</head>
<body>
<p id = "ss">盒子模型主要是有margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)組成</P>
<p id = "rr">盒子模型主要是有margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)組成</P>
</body>
</html>Margin ? padding ?? ?
①. ???? ?? 0?? ?? ?? ?? ??? ? ????. ?? ??? ?? ??? ????? ?? ?????. ?? ??? ?? ??? ?????? ?????.
②. Margin? ?? ?? ?? ??? ? ???, padding? ?? ?? ?? ??? ? ???? ?????.
③. margin? padding? ?? ?? ?? 1, 2, 3, 4? ?????:
a. Margin?? 4?? ?? ?? ????(?: margin:10px 5px). 15px 20px;), ? ?? ?? 10px, ??? ?? ?? 5px, ?? ?? ?? 15px, ?? ?? ?? 20px; ?? 5px, ?? ?? 15px, ?? ?? 20px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??: ???? ?? ?? ??, 4?? ?? ?? ?? ?? ?? ?? ??? ?? ???? ??, ???, ???, ?????.
? ? ? ? ? ? ? ? b. ???? 3?? ?? ?? ????(?: ??: 10px 5px 15px;). ?? ?? ?? 10px, ??? ?? 5px, ??? ?? 15px? ?????.
??? 3?? ?? ?(?: padding:10px 5px 15px;), ? ?? ?? 10px, ??? ?? ? ?? ?? 5px, ?? ?? 15px;
? ? ? ? ? ? ? ? ? ? ? ? ?: ???? ???? ?? ? ?? ?? ?? ?? ?? ???? ?? ??? ?, ???, ??, ?????.
c. Margin?? 2?? ?? ?? ????(?: margin: 10px 5px; ). ??: ?? ? ??? ?? 10px, ??? ? ?? ?? 5px;
??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ???? 2?? ?? ?? ????(?: ??:10px 5px;), ? ??? ??? ????: ?? ?? ? ?? ?? 10px, ??? ?? ? ?? ?? 5px;
????????????????????????????????????? ??: ???? ???? ? ?? ?? ?? ?? ?? ?? ??? ?? ?????. ??, ???, ??? ? ?? ?? ??: 10px;), ? ??? ??? ????. 4?? ?? ??? ?? 10px???.
