<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
background-color: #BBFFAA;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
内容区，内边距，边框，外边距
*/
/*
内联元素不能设置width和height
*/
/* width: 100px;
height: 100px; */
/*
设置水平内边距,内联元素可以设置水平方向内边距
*/
padding-left: 100px;
padding-right:100px ;
/*
垂直方向内边距,内联元素可以设置垂直方向内边距
*/
/* padding-top: 50px;
padding-bottom: 50px; */
/*
为元素设置边框
内联元素可设置边框，垂直边框不会影响到页面布局
*/
border: 1px solid red;
/*
水平外边距
内联元素支持水平外边距
*/
margin-left: 100px;
margin-right: 100px;
/*
内联元素不支持垂直外边距
*/
}
.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>
内联元素不能设置width和height
可以设置水平，垂直方向内边距
可以设置水平边框，垂直边框不会影响布局
内联元素支持水平外边距，不支持垂直外边距