HTML基础—4padding和margin

￡神魔★判官ぃ 2022-01-12 07:45 243阅读 0赞

### 1.padding ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![20190621144450510.png][]

>             padding 内填充  
>             注意：设置padding后会撑大容器的大小  
>             padding的四个方向  
>             top right bottom left  
>               
>             paading复合写法 : top right bottom left  
>             只有一个属性值时: 4个方向都是同一个值  
>             设置两个属性值时：   
>                 第一个属性值设置的是上下两个方向，  
>                 第二个属性值设置的是左右两个方向。  
>             设置三个属性值时：   
>                 第一个属性值设置的是上边一个方向，  
>                 第二个属性值设置的是左右两个方向，  
>                 第三个属性值设置的是下边一个方向。  
>             设置四个属性值时：   
>                 第一个属性值设置的是上边一个方向，  
>                 第二个属性值设置的是右一个方向，  
>                 第三个属性值设置的是下边一个方向，  
>                 第四个属性值设置的是左边一个方向。

###  2.margin ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

下面这个例子可以说明这个问题

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#box{
    				background-color: red;
    				border: 1px solid black;//解决
    			}
    			#div1{
    				height: 50px;
    				background-color: pink;
    				margin: 100px 100px 200px 100px;
    			}
    			#div2{
    				height: 50px;
    				background-color: yellow;
    				margin: 100px;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<div id="box">
    			<div id="div1">div1</div>
    			<div id="div2">div2</div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220109/8e80a4e6cd6d41e5b91c9b34864e331d.png
[20190621144450510.png]: /images/20220109/9d6588d41ff84788ab4c84d437d59fe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220109/ecbcf1ab78a147afa70e82da98ff8f25.png