css中实现border距离视图左右两侧有距离

xvzhengyang

已于 2025-03-11 14:18:16 修改

阅读量375

点赞数 1

分类专栏： Html与css 文章标签： css 前端

于 2025-03-11 14:17:34 首次发布

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/146177944

版权

Html与css 专栏收录该内容

3 篇文章

订阅专栏

首先看效果图

再看css是如何实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main {
				background-color: aqua;
				display: block;
				width: 300px;
				padding: 0px 32px;
				box-sizing: border-box;
			}
			/* 新增的子元素样式 */
			.main-inner {
				/* padding: 0 16px; */
				border-bottom: 1px solid black;
				height: 100%;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="main">
				<!-- 新增子元素 -->
				<div class="main-inner">
					1111
				</div>
			</div>
		</div>
	</body>
</html>