CSSのマージンとパディング
私たちは前にこの絵を学びました: box box。
ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。
CSS inner margin padding
内側マージンはコンテンツの外側と境界線の内側にあり、パディングはすべてのマージンを設定するための 5 つの属性があります。その他 4 それぞれ、上下左右の余白を設定します。
プロパティの説明
padding すべてのマージンを設定します
padding-top 上マージンを設定します
padding-bottom 下マージンを設定します
padding-left 左マージンを設定します
padding-right 右マージンを設定します
<!DOCTYPE html>
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
#all{padding: 100px;}/*设置所有内边距*/
#top{padding-top: 100px;}/*设置上面的内边距*/
#bottom{padding-bottom: 100px;}/*设置下面的内边距*/
#left{padding-left: 100px;}/*设置左边的内边距*/
#right{padding-right: 100px;}/*设置右边的内边距*/
</style>
</head>
<body>
<table border="1">
<tr>
<td id="top">我是padding-top，我设置了上边距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="bottom">我是padding-bottom，我设置了下边距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="left">我是padding-left，我设置了左边距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="right">我是padding-right，我设置了右边距</td>
</tr>
</table>
<table border="1">
<tr>
<td id="all">我是padding，我设置了所有内边距</td>
</tr>
</table>
</body>
</html>CSSマージン コンテンツの境界線を囲む領域は、デフォルトでは透明な領域です。マージンには任意の長さの単位またはパーセンテージを使用できます。 マージンによく使用される属性:
属性すべてのマージンを設定する 左マージンを設定margin-right 右マージンを設定
<!DOCTYPE html>
<html>
<head>
<title>测试外边距</title>
<meta charset="utf-8">
<!-- 调用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(内边距)、content(内容)组成</P>
<p id = "rr">盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成</P>
</body>
</html>marginとpaddingの属性値
① ①デフォルト値はすべて 0 です。属性値は auto にすることができます。マージンが作用する要素はブラウザによって計算され、パディングはその要素に対してブラウザによって計算されます。 ②では、Margin は外側の距離の値を負の値に指定できますが、Padding では境界距離の値を指定できませんので注意してください。③、Margin、padding の属性値は 1、2、3 にすることができます。 、3、3、4:
A、Margin には 4 つの属性値があります (例: Margin: 10px 5px 15px 20px;)、意味は次のとおりです: 上と外側の 10px、右外側の 5px 、外側の下側の 15px、外側の左 20px;有 Padding には 4 つの属性値があります (たとえば、padding: 10px 5px 15px 20px;)、その意味は次のとおりです: 上の内側の境界線 10px、右側の内側の境界線 5px、外側の 15px下の内側の境界線、左内側の 20 ピクセルのスペース。 概要: マージンまたはパディングのいずれであっても、属性値が 4 つある場合、それらのアクションの方向は上、右、下、左です。有 B、Margin には 3 つの属性値があります (例: Margin: 10px 5px 15px;)。その意味は次のとおりです: 上と外側の境界線 10px、右外側と左の外側境界線 5px、下側の外側境界線 15px; ：10px 5px 15px;）、その意味は10px、右パディングと左パディング、15pxの平均右パディング、5pxの左パディングです方向の方向は上、右、左、下です C と Margin には 2 つの属性値 (margin: 10px 5px; など) があり、その意味は次のとおりです: 上と外側の境界線 10px 10px 10px 、右外側と左外側の間隔の 5px; パディングには 2 つの属性値があります (例: Padding: 10px 5px;)。これは、上部内側の距離と下部内側の境界線 10px、右側の内側と左側の内側を意味します。距離5px;概要：2つの属性値がある場合、時計回りの方向は右下です1 つの属性値 (例: パディング: 10px;)、その意味: 4 つの内側の境界線の距離は 10px です 要約: マージンまたはパディングのいずれであっても、属性値が 1 つある場合、そのマージン値は次のとおりです。等しい;
