HTML中详述外边距样式属性(margin)与内边距样式属性(padding)

外边距样式属性(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相同

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值