前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >CSS_边距填充

CSS_边距填充

作者头像
bye
发布2020-11-24 15:16:28
发布2020-11-24 15:16:28
1.1K00
代码可运行
举报
文章被收录于专栏:bye漫漫求学路bye漫漫求学路
运行总次数:0
代码可运行

边距:元素与元素之间的距离。(无法靠近)

填充:指向一个元素的内部,增加空间,(内边距),与外边距不同,填充会改变元素的大小。随着填充的增加,元素会被撑大。

示例:

代码语言:javascript
代码运行次数:0
运行
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; /*将所有的元素边距都设置为0*/
			}
			#box {
				width: 870px;
				overflow: auto;
				margin: auto; /*让父元素自动设置边距,左右边距相等,即可达到居中效果,水平方向有效。*/
			}
			.item {
				float:left;
				margin: 20px;
				border: 5px solid black;
				padding: 15px;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item">
				<img src="imgs/01.png"><br>
				测试文字内容
			</div>
			<div class="item">
				<img src="imgs/02.png" ><br>
				测试文字内容
			</div>
			<div class="item">
				<img src="imgs/03.png" ><br>
				测试文字内容
			</div>
		</div>
	</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档