CSS-margin样式属性

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

paku-san

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

阅读量482

点赞数

分类专栏：前端文章标签： html css 前端页面

本文链接：https://blog.csdn.net/qq_35302939/article/details/90342906

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

margin-外边距样式属性

相对于同级的标签设置偏移量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				
				border:1px solid red;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;margin-bottom: 20px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow;margin-left: 20px;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
		
		<span>margin样式属性</span> 
		<span style="margin-left: 20px; margin-right: 30px;margin-top: 20px;magin-bottom: 20px;">margin样式属性</span> 
		<span>margin样式属性</span>
		
		<div style="border: 1px solid red; height: 300px;width: 300px;margin-top: 20px;margin-bottom: 20px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow;margin-left: 20px;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
		
		<div style="border: 1px solid red; height: 300px;width: 300px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow;margin-left: 20px;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
	</body>
</html>

效果：
在这里插入图片描述
对于块级元素和行内元素都可以设置他们的外边距。但是要注意他们相对的标签。

paku-san

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-margin样式属性

margin-外边距样式属性相对于同级的标签设置偏移量<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span{ border:1px solid red; ...
复制链接

扫一扫