【論理プロパティ】margin-startとは その他比較

知らなかったのでメモ

margin-start（= margin-left）

文の始まりの前にマージンがつく。
★がマージンが付く部分だとして、
例）★あいうえお

margin-end(= margin-right)

文の終わりにマージンがつく
例）あいうえお★

margin-before(= margin-top)

文が始まる段の上にマージンがつく
例）
　　★
　　あいうえお

margin-after(= margin-bottom)

文が終わる段の下にマージンがつく
例）
　　あいうえお
　　★

例

以下のように指定

(chromeでしかチェックしていません)

<style type="text/css">
.textboxwrap {
	border: 2px #000 solid;
}
.textbox.start {
	margin-start: 50px;
	-webkit-margin-start: 50px;
	background-color: red;
}
	.textbox.end {
	margin-end: 50px;
	-webkit-margin-end: 50px;
	background-color: blue
}
	.textbox.before {
	margin-before: 50px;
	-webkit-margin-before: 50px;
	background-color: yellow;
}
	.textbox.after {
	margin-start: 50px;
	-webkit-margin-after: 50px;
	background-color: orange;
}
</style>