CSSのマージンとパディング
私たちは前にこの絵を?qū)Wびました: box box。
ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領(lǐng)域を定義します。
CSS inner margin padding
內(nèi)側(cè)マージンはコンテンツの外側(cè)と境界線の內(nèi)側(cè)にあり、パディングはすべてのマージンを設(shè)定するための 5 つの屬性があります。その他 4 それぞれ、上下左右の余白を設(shè)定します。
プロパティの説明
padding すべてのマージンを設(shè)定します
padding-top 上マージンを設(shè)定します
padding-bottom 下マージンを設(shè)定します
padding-left 左マージンを設(shè)定します
padding-right 右マージンを設(shè)定します
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試內(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マージン コンテンツの境界線を囲む領(lǐng)域は、デフォルトでは透明な領(lǐng)域です。マージンには任意の長(zhǎng)さの単位またはパーセンテージを使用できます。 マージンによく使用される屬性:
屬性すべてのマージンを設(shè)定する 左マージンを設(shè)定margin-right 右マージンを設(shè)定
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試外邊距</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 です。屬性値は auto にすることができます。マージンが作用する要素はブラウザによって計(jì)算され、パディングはその要素に対してブラウザによって計(jì)算されます。 ②では、Margin は外側(cè)の距離の値を負(fù)の値に指定できますが、Padding では境界距離の値を指定できませんので注意してください。③、Margin、padding の屬性値は 1、2、3 にすることができます。 、3、3、4:
A、Margin には 4 つの屬性値があります (例: Margin: 10px 5px 15px 20px;)、意味は次のとおりです: 上と外側(cè)の 10px、右外側(cè)の 5px 、外側(cè)の下側(cè)の 15px、外側(cè)の左 20px;有 Padding には 4 つの屬性値があります (たとえば、padding: 10px 5px 15px 20px;)、その意味は次のとおりです: 上の內(nèi)側(cè)の境界線 10px、右側(cè)の內(nèi)側(cè)の境界線 5px、外側(cè)の 15px下の內(nèi)側(cè)の境界線、左內(nèi)側(cè)の 20 ピクセルのスペース。 概要: マージンまたはパディングのいずれであっても、屬性値が 4 つある場(chǎng)合、それらのアクションの方向は上、右、下、左です。有 B、Margin には 3 つの屬性値があります (例: Margin: 10px 5px 15px;)。その意味は次のとおりです: 上と外側(cè)の境界線 10px、右外側(cè)と左の外側(cè)境界線 5px、下側(cè)の外側(cè)境界線 15px; ：10px 5px 15px;）、その意味は10px、右パディングと左パディング、15pxの平均右パディング、5pxの左パディングです方向の方向は上、右、左、下です C と Margin には 2 つの屬性値 (margin: 10px 5px; など) があり、その意味は次のとおりです: 上と外側(cè)の境界線 10px 10px 10px 、右外側(cè)と左外側(cè)の間隔の 5px; パディングには 2 つの屬性値があります (例: Padding: 10px 5px;)。これは、上部?jī)?nèi)側(cè)の距離と下部?jī)?nèi)側(cè)の境界線 10px、右側(cè)の內(nèi)側(cè)と左側(cè)の內(nèi)側(cè)を意味します。距離5px;概要：2つの屬性値がある場(chǎng)合、時(shí)計(jì)回りの方向は右下です1 つの屬性値 (例: パディング: 10px;)、その意味: 4 つの內(nèi)側(cè)の境界線の距離は 10px です 要約: マージンまたはパディングのいずれであっても、屬性値が 1 つある場(chǎng)合、そのマージン値は次のとおりです。等しい;
