Marging Border Background Padding Context理解

最新推荐文章于 2023-09-17 12:42:25 发布

iteye_17811

最新推荐文章于 2023-09-17 12:42:25 发布

阅读量124

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.youkuaiyun.com/iteye_17811/article/details/81936198

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>