html+css基础2（外边距）

最新推荐文章于 2023-06-06 09:17:52 发布

就是不吃饭鸭

最新推荐文章于 2023-06-06 09:17:52 发布

阅读量141

点赞数

分类专栏： HTML+CSS基础注意点文章标签： html css

本文链接：https://blog.csdn.net/qq_34108428/article/details/111305308

版权

HTML+CSS基础注意点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

外边距

注意：
1.行内元素不支持垂直外边距
2.取值类型px（正值/负值，可以微调位置）、%（参考父元素），
auto（水平居中，自动分布页面的空白区域，必须给块元素宽度）
3.垂直外边距合并
当两个垂直往外边距合并的时候，会产生合并现象，取其中的较大值
4.垂直外边距溢出
当父元素没有边框时，给子元素设置垂直外边距会产生溢出现象，作用到父元素上

解决方法
①给父元素增加边框（尺寸增加）
②取消子元素的垂直外边距，改成父元素的垂直内边距（尺寸增加）
③在子元素的前面加一个空的table挡住外边距（增加页面结构）
④父元素加一个:before

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			.box1{
				width: 398px;
				height: 398px;
				background-color: #ba0005;
				border-radius:50%;
				border: 1px solid #ba0005;		/* 方法一:设置边框透明，但是边框会使盒子尺寸增加 */
				/* position: relative; */
			}
			.f1{
				font-size: 46px;
				color: #fff5f8;
				/* position: absolute;
				left: 106px; top: 110px; */
				margin: 100px;
				
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: #ba0005;
				border-radius:50%;
				padding: 100px;						/* 方法二:设置内边距，需要父级宽高减去相应距离 */
			}
			.f2{
				font-size: 46px;
				color: #fff5f8;
			}
			.box3{
				width: 400px;
				height: 400px;
				background-color: #ba0005;
				border-radius:50%;
			}
			.f3{
				font-size: 46px;
				color: #fff5f8;
				margin: 100px;
			}
			.box4{
				width: 400px;
				height: 400px;
				background-color: #ba0005;
				border-radius:50%;
			}
			.box4:before{							/* 方法四:父级前加一个before,使其content为空 */
				content: "";
				display: table;
			}
			.f4{
				font-size: 46px;
				color: #fff5f8;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<h1 class="f1">产品展示</h1>
		</div>
		<div class="box2">
			<h1 class="f2">产品展示</h1>
		</div>
		<div class="box3">
			<table border="" cellspacing="" cellpadding="">		<!-- 方法三：父级前加个table，但会增加页面结构 -->
			</table>
			<h1 class="f3">产品展示</h1>
		</div>
		<div class="box4">
			<h1 class="f4">产品展示</h1>
		</div>
	</body>
</html>