Javascript MEMO

日本語

ENGLISH

戻る

内側の余白

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

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

[サンプル]

[all]

12345677890
12345677890
12345677890
12345677890
12345677890

[top]

12345677890
12345677890
12345677890
12345677890
12345677890

[right]

12345677890
12345677890
12345677890
12345677890
12345677890

[botton]

12345677890
12345677890
12345677890
12345677890
12345677890

[left]

12345677890
12345677890
12345677890
12345677890
12345677890

[HTML/CSS]

[all]<br>
<div class="frameAll">
	<div class="frameBlock">
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	</div>
</div>
[top]<br>
<div class="frameTop">
	<div class="frameBlock">
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	</div>
</div>
[right]<br>
<div class="frameRight">
	<div class="frameBlock">
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	</div>
</div>
[botton]<br>
<div class="frameBottom">
	<div class="frameBlock">
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	</div>
</div>
[left]<br>
<div class="frameLeft">
	<div class="frameBlock">
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	12345677890<br>
	</div>
</div>
<style>
.frameBlock {
	background-color: rgb(176 196 222 / 1.00); /* lightsteelblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	padding: 5px;/* inner margin */
	word-break:break-all;
}

.frameAll {
	background-color: rgb(240 248 255 / 0.5);/* aliceblue */
	border: 3px solid rgb(30 144 255 / 1.00); /* 1px */
	padding: 5px;/* inner margin */
	word-break:break-all;
	width:150px;
}
.frameTop {
	background-color: rgb(240 248 255 / 0.5); /* aliceblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	padding-top: 5px;/* inner margin */
	word-break:break-all;
	width:150px;
}
.frameRight {
	background-color: rgb(240 248 255 / 0.5); /* aliceblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	padding-right: 5px;/* inner margin */
	word-break:break-all;
	width:150px;
}
.frameBottom {
	background-color: rgb(240 248 255 / 0.5); /* aliceblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	padding-bottom: 5px;/* inner margin */
	word-break:break-all;
	width:150px;
}
.frameLeft {
	background-color: rgb(240 248 255 / 0.5); /* aliceblue */
	border: 3px solid rgb(30 144 255 / 1.00);/* 1px */
	padding-left: 5px;/* inner margin */
	word-break:break-all;
	width:150px;
}
</style>

padding: 5px;

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

padding-top: 5px;

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

padding-right: 5px;

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

padding-bottom: 5px;

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

padding-left: 5px;

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

戻る

著作権情報

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