Javascript MEMO

日本語

ENGLISH

外側の余白

フレームの外側に余白を設ける設定

フレームの外側に余白を設ける設定です。
marginを使用して周囲もしくは指定した上下左右のみに
余白を設定することができます。

[サンプル]

[all]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[top]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[right]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[bottom]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[left]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[none]

123 123	123 123	123 123
123 123	123 123	123 123
123 123	123 123	123 123

[HTML/CSS]

[all]<br>
<table>

<tr>
<td>
	<div class="frameDummy">
	123<br>
	123<br>
	</div>
</td>
<td>
	<div class="frameDummy">
	123<br>
	123<br>
	</div>
</td>
<td>
	<div class="frameDummy">
	123<br>
	123<br>
	</div>
</td>
</tr>
</table>
<style>
.frameDummy {
	background-color: rgb(176 196 222 / 1.00); /* lightsteelblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	word-break:break-all;
	text-align:center;
}

.frameNone {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00); /* 1px */
	word-break:break-all;
	text-align:center;
}
.frameAll {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00); /* 1px */
	margin: 10px;/* inner margin */
	word-break:break-all;
	text-align:center;
}
.frameTop {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	margin-top: 10px;/* inner margin */
	word-break:break-all;
	text-align:center;
}
.frameRight {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	margin-right: 10px;/* inner margin */
	word-break:break-all;
	text-align:center;
}
.frameBottom {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	margin-bottom: 10px;/* inner margin */
	word-break:break-all;
	text-align:center;
}
.frameLeft {
	background-color: rgb(255 250 205 / 1.00);/* lemonchiffon */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	margin-left: 10px;/* inner margin */
	word-break:break-all;
	text-align:center;
}
</style>

margin: 5px;

周囲に5pxの余白を設定します。

margin-top: 5px;

上に5pxの余白を設定します。

margin-right: 5px;

右に5pxの余白を設定します。

margin-bottom: 5px;

下に5pxの余白を設定します。

margin-left: 5px;

左に5pxの余白を設定します。

戻る

著作権情報

ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。