<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 186px;
height:186px;
background: red;
border:10px solid #000;
/*padding:10px;/*内边距*/
/*padding:10px 30px;
padding:10px 20px 30px;*/
padding:10px;/*内边距*/
padding:10px 30px;/*上下 左右*/
padding:10px 30px 50px;/*上 左右 下*/
padding:10px 20px 30px 40px;/*上 右 下 左*/
}
.box2{
width: 186px;
height:186px;
background: red;
border:10px solid #000;
padding-top:10px;/*顶部内边距*/
padding-right:50px;/*右内边距*/
padding-bottom:30px;/*底部内边距*/
padding-left:20px;/*左内边距*/
}
</style>
</head>
<body>
<!--
外边距: 改变元素外边的间距
内边距: 改变元素与内容的间距
padding:一个值; 一个值,改变四个方向
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;顺时针方向变化
padding-top:顶部内边距;
padding-right:右内边距;
padding-bottom:底部内边距;
padding-left:左内边距;
注意:内边距没有负值;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
margin-top:上外边距;
marign-right:右外边距;
marign-bottom:下外边距;
marign-left:左外边距;
注意: margin可以为负值, auto自适应
margin常见bug:
1: 上下外边距相遇,只显示较大值
2: 嵌套关系的元素,子元素的上外边距和父元素的上外边距相遇,取较大值
盒模型占位计算:
w= width+左右边框+左右内边距+左右外边距
h= height+上下边框+上下内边距+上下外边距
-->
<div class="box">
<img src="img/3.jpg" />
</div>
<div class="box2">
<img src="img/3.jpg" />
</div>
哈哈哈哈哈
</body>
</html>
CSS盒模型细节讲解
最新推荐文章于 2024-08-21 22:53:13 发布