css中实现border距离视图左右两侧有距离
首先看效果图
再看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>