CSS样式中的margin,padding,float属性学习记录

最新推荐文章于 2024-05-10 09:57:10 发布

ioszhanghui

最新推荐文章于 2024-05-10 09:57:10 发布

阅读量944

点赞数

分类专栏： Vue 文章标签： margin padding

本文链接：https://blog.csdn.net/ioszhanghui/article/details/95215061

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在HTML布局中，对元素设置内边距padding和外边距margin，

padding 指的是元素实际内容和元素边框之间的距离,指的是边框和内容之间的留白区域

margin 指的是元素实际内容区域以外，加入的留白区域

padding和margin区别

1.padding会计入到元素的大小当中

2.在给背景添加样式时，padding的样式是被渲染的，margin是不会被渲染的

使用方式：

margin:遵循的规则是上右下左，在表达的过程中，存在省略，

比如：

1.完整的margin样式

//上边留白 10px 右边留白 30px  下边留白 20px  左边留白 30px
margin: 10px 30px 20px 30px;

2.margin表达式中只包含了三个，则是，省略了左留白，在左留白省略时，采用右留白的值，例如:

//上留白 10px 右留白 20px 下留白 30px 省略了左留白 做采用 右留白 填充 也就是 左留白也是20px 
margin: 10px 20px 30px;

3.margin表达式，只包含了两个样式，

//例如只设置了 两个样式 也就是 上留白 和下留白一样 10px  左留白和右留白的样式一样都是 30px
margin: 10px 30px;

4.在样式中，留白的边距都是一样时，通常只会保留一个值。

//简单的就是 四周留白全部都是 10px
margin: 10px;

5.还有一种，不设置留白，直接设置auto

//上下的留白空间是10px 左右是居中
margin: 10px auto;

padding的样式写法和margin的使用方式一样。

<html>
<head>
	<style type='text/css'>
	*{
		padding: 0;
		margin: 0;
	}
	body{
		background: gray;
	}
	.header{
		width: 500px;
		height: 200px;
		background: orange;
	}

	.div-content{
		float: left;
		margin-top: 30px;
		margin-left: 20px;
		margin-bottom: 0px;
		background: green;
	}
	.div1{
		width: 300px;
		height: 300px;
		background: blue;
		display: flex;
		justify-content: center;

		/*display: table;*/
		/*padding: 10px 30px 0px 10px;*/
	}
	.div10{
		width: 50px;
		height: 50px;
		background: red;
		padding: 10px 20px;
		float: left;;
		border: 10px solid black;
		/*display: inline-table;*/
		/*float: left;*/
		/*margin-left: 50px;*/
	}


	.div11{
		/*margin: 10px;*/
		/*margin: 10px 30px 20px 30px;*/
		/*margin: 10px 20px 30px;*/
		/*margin: 10px 30px;*/
		margin: 10px auto;
		width: 50px;
		height: 50px;
		float: left;
		/*display: inline-table;*/
		/*display: inline-block;*/
	/*	width: 100px;
		height: 100px;*/
		background: orange;
	}
	.div12{
		width: 50px;
		height: 50px;
		background: black;
		float: right;
		margin-right: 30px;
		margin-top: 20px;
		margin-bottom: 30px;
		/*margin-left: 50px;*/
	}
	.div20{
		width: 100px;
		height: 30px;
		background: green;
		clear: both;
		float: right;;
	}
	.auto_div{
		width: 100px;
		height: 30px;
		margin: 10px auto;
		/*margin: auto auto;*/
		/*margin: auto;*/
		background-color: red;
		/*justify-content: center;*/
	}
	</style>
</head>
<body>
	<div class='header'></div>
	<div class='div1'>
		<div class='auto_div'></div>

<!-- 		<div class= 'div-content'>
			<div class='div10'>测试一</div>
			<div class='div11'>测试二</div>
		</div>
		<div class='div12'></div>
		<div class='div20'></div> -->
	</div>
</body>
</html>

学习博客：

https://blog.csdn.net/seu_lxy/article/details/88915554

http://www.w3school.com.cn/css/css_positioning_floating.asp

ioszhanghui

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS样式中的margin,padding,float属性学习记录

在HTML布局中，对元素设置内边距padding和外边距margin，padding 指的是元素实际内容和元素边框之间的距离,指的是边框和内容之间的留白区域margin 指的是元素实际内容区域以外，加入的留白区域padding和margin区别1.padding会计入到元素的大小当中2.在给背景添加样式时，padding的样式是被渲染的，margin是不会被渲染的使用方式：...
复制链接

扫一扫