HTML中详述外边距样式属性（margin）与内边距样式属性（padding）

最新推荐文章于 2024-04-15 19:17:28 发布

程序猿11号

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量6.7k

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/m0_46383618/article/details/107371420

版权

外边距样式属性（margin）

外边距样式属性（margin）：设置边框外的距离。

属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<p>郑州大学第一附属医院</p>
		
		<div>白日依山尽，黄河入海流</div>
		
		<span>郑州</span><b>大学</b>
		<style>
			p,div{
				border: 5px solid red;
				text-align: center;
				width: 900px;
				margin: 0px auto;/*使块级元素居中*/
			}
			
			/*margin：外边距
			 * 用于设置同级标签的间距,左右时相加合并，上下时取最大值
			 */
			/*p{
				margin-bottom: 100px;
			}
			
			div{
				margin-top: 50px;
			}
			
			b{
				margin-left: 50px;
			}
			
			span{
				margin-right: 50px;
			}*/
			
			span,b{
				display: inline-block;
			}
			
			b{
				background-color: black;
			}
		</style>
		
		<br />
		<p>郑州大学第一附属医院</p>
		<span>郑州</span><b>大学</b><span>真好</span>
		<div>白日依山尽，黄河入海流</div>
		
		<style>
			b{
				/*margin-left: 50px;
				margin-right: 50px;*/
				/*margin: 50px;*/
				margin:10px 50px ;/*上下 左右*/
				margin: 10px 50px 10px;/*上 左右  下*/
				margin: 10px 50px 10px 50px;/*上 右 下 左 顺时针*/
			}
		</style>
	</body>
</html>

效果图：

补充：

一、margin属性可以有 1 到 4 个值：
1个值：表示上下左右外边框边距均为50px；

margin: 50px;

2个值：表示上下外边框边距为10px，左右外边框边距为50px；

margin:10px 50px ;/*上下 左右*/

3个值：表示上外边框边距为10px，左右外边框边距为50px，下外边框边距为10px；

margin: 10px 50px 10px;/*上 左右  下*/

4个值：表示上外边框边距为10px,右外边框边距为50px,下外边框边距为10px,左外边框边距为50px

margin: 10px 50px 10px 50px;/*上 右 下 左 顺时针*/

二、margin:0 auto;——水平居中显示，例子例子
三、取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置。

*{
    margin:0;
}

margin-top样式属性

设置元素的上外边距，该属性有多个值：

margin-bottom样式属性

设置元素的下外边距，该属性有多个值：

margin-right样式属性

设置元素的右外边距，该属性有多个值：

margin-left样式属性

设置元素的左外边距，该属性有多个值：

内边距样式属性（padding）

内边距样式属性（padding）：设置边框中内容与边框的距离。
属性：padding-top样式属性，padding-bottom样式属性，padding-left样式属性和padding-right样式属性。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院</p>
		
		<style>
			p{
				/*padding用于设置内部元素距离边框的间距*/
				border: 1px solid red;
				/*padding-left: 20px;
				padding-top: 20px;
				padding-right: 20px;
				padding-bottom: 20px;*/
				/*padding: 20px;*/
				/*padding: 10px 50px;/*上下 左右*/*/
				/*padding: 5px 100px 50px;/*上 左右  下*/*/
				padding: 5px 50px 90px 100px;/*上 右 下 左 顺时针*/
			}
		</style>
	</body>
</html>

其余同margin相同

程序猿11号

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML中详述外边距样式属性（margin）与内边距样式属性（padding）

外边距样式属性（margin）外边距样式属性（margin）：设置边框外的距离。属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。代码示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{
复制链接

扫一扫