<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;/*清除所有盒子外边距*/
padding: 0px;
}
div{
width: 200px;
height: 200px;
display: inline-block;
}
.box1{
margin-right: -5px; /*设置负值让盒子二可以靠近*/
background-color: yellow;
/*margin-left: 100px;!*margin值可以为正值也可以为负值*!*/
/*内边距不能放置有效内容*/
padding: 10px;/*上下左右均为10px,内间距增加时会把盒子撑大*/
/*调整盒子padding时同时调整width,与height这样才能保证盒子不变形*/
}
.box2{
background-color: skyblue;
padding: 50px;
padding: 20px 40px;
padding: 20px 30px 40px;
padding: 10px 20px 30px 40px;/*上 右下 左 顺时针*/
}
</style>
</head>
<body>
<div class="box1">我是盒子一</div>
<div class="box2">我是盒子二</div>
</body>
</html>
相关文章：
-
2021-07-10
-
2021-11-15
-
2021-12-10
-
2022-02-09
-
2021-04-07
-
2021-06-17
-
2021-11-30
-
2022-01-16