<!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 -->
<!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加
内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间
.你也可以对内联元素上的上边和下边增加内边距,不过这个内边距不会影响包围她的其他内联元素的间距,所以内边距会与其他内联元素重叠-->
看下面的效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span</title>
<!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 -->
<!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加
内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间
.你也可以对内联元素上的上边和下边增加内边距,不过这个内边距不会影响包围她的其他内联元素的间距,所以内边距会与其他内联元素重叠-->
<style type="text/css">
html,body{
padding: 0px;
margin: 0px;
}
div{
height: 10000px;
width: 1000px;
background-color: yellow;
}
span{
background-color: blue;
margin-top: 30px;
width: 10px;
height: 100px;
margin-left: 40px;
/* 外边距:上下空间没有增加 */
/* margin-left: 50px; */
/* 左右空间增加 */
/* padding-left: 50px; */
padding-top: 300px;
padding-bottom: 300px;
/* padding-right: 50px; */
}
p{
height: 50px;
width: 50px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<a href="">
<em>这个是强调,你懂得</em>
<span>2我是span,我看下我的宽度 高度 内外边距什么是否可以设置</span>
</a>
<!-- 可以看到在对这些元素定位之前,设置宽度和高度是没有效果的 -->
<!-- 可以看到,虽然设置了span的上和下内边距,不过这个内边距不会影响包围它的其他内联元素的间距
例如本例子中的em元素的间距没有受到span的影响
,所以内边距会与其他内联元素重叠 -->
<p ></p>
</div>
</body>
</html>