边框+内外间距设置(Html基础)9
程序员文章站
2022-04-25 11:17:31
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html基础</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: aqua;
/* solid直线 dashed虚线 dotted点线 double双直线*/
border: 1px black solid;
}
#div2{
width: 30px;
height: 40px;
background-color: darkblue;
/* solid直线 dashed虚线 dotted点线 double双直线*/
border: 1px black solid;
/* 设置外边距 */
margin-top: 10px;
margin-left: 10px;
/* 设置内边距 设置内边距的时候会挤出,所以相对应的长度和宽度应该减少才能保持div的长宽保持不变 */
padding-left: 20px;
padding-top: 10px;
float: left;
}
#div3{
width: 40px;
height: 40px;
background-color: darkviolet;
/* solid直线 dashed虚线 dotted点线 double双直线*/
border: 1px black solid;
/* 设置外边距 */
margin-top: 10px;
margin-left: 10px;
/* 设置内边距 */
padding-left: 10px;
padding-top: 10px;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
哈
</div>
<div id="div3">
哈
</div>
</div>
<div id="">
</div>
</body>
</html>
下一篇: 安全相关内容整理
推荐阅读