css 个人书写习惯

最新推荐文章于 2024-07-21 19:13:42 发布

老君-hjs

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量72

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_43072786/article/details/120496401

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当UI图中要求所有标签之间的间距不同时，统一设置margin-left;
这么写主要就是为了排版。
如果“二娃”因为需求原因隐藏的话，那么“大娃”与“三娃”之间还会按照“三娃”的间隙进行排版。
同理：竖向排列统一设置margin-top（ps：已实际需求为准！）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			html, body, div, span {
				margin: 0;
				padding: 0;
			}
			.span {
                margin: 20px;
				display: flex;
				align-items: center;
				background-color: aquamarine;
			}
			.span > span:first-child {
				margin-left: 0px !important;
			}
		</style>
	</head>
	<body>
		<div class="span">
			<span class="span_a" style="margin-left: 10px;background-color: red;">大娃</span>
			<span class="span_b" style="margin-left: 20px;background-color: orange;">二娃</span>
			<span class="span_c" style="margin-left: 30px;background-color: yellow;">三娃</span>
			<span class="span_d" style="margin-left: 40px;background-color: green;">四娃</span>
		</div>
	</body>
</html>

老君-hjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 个人书写习惯

当UI图中要求所有标签之间的间距不同时，统一设置margin-left; 这么写主要就是为了排版。如果“二娃”因为需求原因隐藏的话，那么“大娃”与“三娃”之间还会按照“三娃”的间隙进行排版。同理：竖向排列统一设置margin-top（ps：已实际需求为准！） <!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> html, body, div, s
复制链接

扫一扫