网页基础（十六）盒子模型内外边距

最新推荐文章于 2023-10-26 16:32:40 发布

@大娱乐家

最新推荐文章于 2023-10-26 16:32:40 发布

阅读量524

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104606954

版权

上图为盒子模型中内外边距和边框示意图

外边距设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外边距</title>
		<<!--
        	外边距 margin
        	margin-top 上外边距
        	margin-right
        	margin-bottom  下外边距
        	margin-left
        	margin属性可以给margin的四个值子属性进行简写
        	注意：设置了四个属性值时，按照顺时针方向也就是上右下左
        	margin 3px 5px; 上下为3像素 左右为5像素
        	margin 3px 5px 7px; 上为3像素 左右为5像素 下为7像素
        	margin 9px 上下左右全是9像素
        	margin 0px auto 上下为0像素 左右根据窗口边距左右居中
        	
        -->
        <style>
        	.margin{
        		margin-top: 30px;
        		margin-right: 10px;
        		margin-bottom: 40px;
        		margin-left: 60px;
        	}
        	.automargin{
        		/*用盒子居中必须加宽度*/
        		width: 500px;
        		margin: 0px auto;
        	}
        </style>
	</head>
	<body>
		<div>没有设置外边距的显示效果</div>
		<div class="margin">外边距设置</div>
		<div class="automargin">设置位置水平居中的段落</div>
	</body>
</html>

内边距设置效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内边距</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-03-02
        	描述：padding 内边距
        -->
        <style>
        	/*尽量少使用内边距  因为padding可改变盒子的大小 尽量使用margin*/
        	.padding{
        		padding: 30px 50px;
        	}
        </style>
	</head>
	<body>
		<table border="1" width="200px">
			<tr>
				<td>没有填充效果</td>
			</tr>
			<tr>
				<td  class="padding"><span>填充效果</span></td>
			</tr>
		</table>
	</body>
</html>

@大娱乐家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页基础（十六）盒子模型内外边距

上图为盒子模型中内外边距和边框示意图外边距设置：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>外边距</title> <<!-- 外边距 margin margin-top 上外...
复制链接

扫一扫