|
写真: |
左は、次のようになにも指定しない例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束です</p> |
marginは 自身の外側に余白を作り、
paddingは 自身の内側に詰め物をするように空間を作成します。
pの中に画像(gazou.jpg)を配置する例で、左枠のように見えるブラウザの表示を
その右側で説明します。
なお、空間のサイズを指定する場合、pxのピクセルという単位を使っています。
|
写真: |
左は、次のようになにも指定しない例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束です</p> |
|
写真: |
左は、画像の左で外側に 20ピクセルの空間を指定した例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg" style="margin-left: 20px;"> これは、<br>お祝いの<br>花束です</p> 左右上下を個別に指定できます。 右はmargin-right、 上はmargin-top、 下はmargin-bottomを 使います |
|
写真: |
左は、画像にmaginで20ピクセルの空間を指定した例です。
<p style="background-color: yellow;">写真: <img src="gazou.jpg" style="margin: 20px;"> これは、<br>お祝いの<br>花束です</p> (画像の外側に上下左右のすべてで10ピクセルの空間ができています。) |
|
写真: |
左は、pタグでmaginで10ピクセルの空間を指定した例です。
<p style="background-color: yellow; margin: 10px;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束です</p> (pの外側に上下左右のすべてで10ピクセルで白の空間ができています。) |
|
写真: |
左は、pタグでpaddingで10ピクセルの空間を指定した例です。
<p style="background-color: yellow; padding: 10px;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束です</p> (pの内側に上下左右のすべてで10ピクセルの空間ができています。) 左右上下を個別に指定できます。 左はpadding-left、 右はpadding-right、 上はpadding-top、 下はpadding-bottomを 使います。 |
|
写真: |
左は、pタグでpadding-leftで20ピクセル、marginで10ピクセルの空間を指定した例です。
<p style= "background-color: yellow; padding-left: 20px; margin: 10px"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束です</p> pの外側に上下左右のすべてで10ピクセルの空間ができています。 そして、pの左の内側に20ピクセルの空間ができています。 |
これは、