<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
*内容区,内边距,边框,外边距
*/
/*
*内联元素不能设置width和height
*/
/* width: 100px;
height: 100px;*/
/*
*设置水平内边距,内联元素可以设置水平方向的内边距,会影响布局
*/
/* padding-left: 100px;
padding-right:100px;*/
/*
*垂直方向的内边距,内联元素可以设置垂直内边距,但是不会影响布局,只是显示效果有所变化
*/
/*padding-top:100px;
padding-bottom:100px;*/
/*
*为元素设置边框,内联元素可以设置边框,垂直方向不影响布局,水平方向影响布局
*/
/*border:red 1px solid;*/
/*
*水平外边距
*内联元素支持 水平方向的外边距
*/
/* margin-left:100px;*/
/*
*内联元素不支持垂直外边距
*/
/* margin-top:200px;
margin-bottom:200px;*/
}
.s2{
/*
*为右边的元素设置一个左外边距
*水平方向的外边距不会重叠,而是求和
*/
margin-left:100px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>