Marging Border Background Padding Context理解

最新推荐文章于 2020-05-30 10:44:26 发布

原创最新推荐文章于 2020-05-30 10:44:26 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用CSS进行网页布局的具体示例，展示了如何通过设置不同的属性来调整元素的位置和外观，包括背景颜色、边距、内边距和边框等。

CSS代码

body{
background:yellow;
}

#outside{
 width:500px;
 height:500px;
 background:red;
 margin:50px;
 padding:80px 40px 80px 40px;
 border-style:solid;
 border-width:40px 60px 40px 60px;
 border-color:blue;}
 
#inside {
 width:200px;
 height:200px;
 background:green;
 margin:50px;
 padding:80px;
 border-style:solid;
 border-width:20px;
 border-color:gray;}

HTML例子

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
		<title>css test</title>
	</head>
	<body>
		<div id="outside">
			this is outside div
			<div id="inside">
				this is inside div
			</div>
		</div>
	</body>
</html>