Skip to content

Latest commit

 

History

History
69 lines (61 loc) · 1 KB

盒模型.md

File metadata and controls

69 lines (61 loc) · 1 KB
Raw

盒模型

邊框 border

  • 上 -> border-top
  • 下 -> border-bottom
  • 左 -> border-left
  • 右 -> border-right

內邊距 padding

  • 上 -> padding-top
  • 下 -> padding-bottom
  • 左 -> padding-left
  • 右 -> padding-right

外邊距 margin

  • 上 -> margin-top
  • 下 -> margin-bottom
  • 左 -> margin-left
  • 右 -> margin-right

Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			margin: 0px;
		}

		div {
			height: 100px;
			width: 400px;
			border: #0E24EC solid 2px;
		}

		#div_1 {
			border-bottom: #F9250D dashed 2px;
			background-color: #A7F21D;
			padding-top: 20px;
		}

		#div_2 {
			background-color: #FFE800;
			padding-left: 20px;
			margin: 50px;
		}

		#div_3 {
			background-color: #1734CB;
			padding: 20px 50px 50px 100px;/*順時針*/
		}
	</style>
</head>
<body>
	<div id="div_1">
		Hello World
	</div>
	<div id="div_2">
		Hello World
	</div>
	<div id="div_3">
		Hello World
	</div>
</body>
</html>