外边距（清除元素的默认内外边距块级盒子水平居中插入图片和背景图片区别）

最新推荐文章于 2022-10-23 15:58:25 发布

昕晴～～

最新推荐文章于 2022-10-23 15:58:25 发布

阅读量541

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_47183545/article/details/105907226

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

块级盒子水平居中左右外边距设置为auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 清除盒子默认的内外边距 */
			* {
				margin: 0;
				padding: 0;
			}
			span {
				margin: 0 30px;
			}
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 1px solid #000;
				padding: 20px;
				/*  margin值的简写意思和padding完全相同 */ 
				/* margin: 100px 20px; */
				/* 块级盒子水平居中 */
				/* margin-left: auto;
				margin-right: auto; */
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div>外边距</div>
		<span>行内元素为照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距</span>
	</body>
</html>

文字水平居中是text-align：center；块级盒子水平居中是左右margin改为auto。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 300px;
				background-color: pink;
				/* 盒子居中 */
				margin: 50px auto;
				/* 文字居中 */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>稳住<strong>我们能赢</strong>
			<input type="text" />
		</div>	
	</body>
</html>

插入图片移动位置靠盒模型padding margin;背景图片只能通过background-position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pic,
			.bg {
				height: 500px;
				width: 500px;
				border: 1px solid #FF0;	
			}
			.pic img {
				/* 插入图片移动位置只能靠margin，padding来实现（padding会撑大盒子） */
				margin: 30px;
			}
			.bg {
				/* 背景图片只能通过background-position实现 */
				background: pink url(./img/2020.png) no-repeat 30px 30px;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="pic">
			<img src="./img/tupian.png" alt="图片">
		</div>
		<div class="bg">背景图片</div>
	</body>
</html>

昕晴～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
外边距（清除元素的默认内外边距块级盒子水平居中插入图片和背景图片区别）

块级盒子水平居中左右外边距设置为auto<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* 清除盒子默认的内外边距 */ * { margin: 0; paddin...
复制链接

扫一扫