CSS技巧：行内块元素转换与布局调整-CSDN博客

本文介绍了如何使用CSS将导航栏中的`<a>`标签从行内元素转换为行内块元素，以实现特定的布局效果。转换后，元素的宽度变为文本宽度，高度与外层`div`相等，并通过添加`padding`实现间距。讨论了在设置`padding`和`margin`时的注意事项，以及如何避免块元素塌陷的问题，确保导航栏的视觉效果和兼容性。

目标-最终呈现的效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>新浪导航栏</title>
	<style>

		* {
			margin: 0;
			padding: 0;
		}
		.nav {
			height: 41px;
			background-color: #fcfcfc;
			border-top: 2px solid orange;
			border-bottom: 1px solid #ccc;
		}
		.nav a {
			display: inline-block;
			font: 12px "微软雅黑";
			text-decoration: none;
			line-height: 41px;
			color: #464650;

			/*margin: 0 20px; 不行*/
			padding: 0 20px;

		}
		.nav a:hover {
			background-color: #ccc;
		}

	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

.nav a转行内块前：
鼠标hover
使用检查选择
.nav a转行内块后：

a转行内块后默认宽度是文本宽度，高于外盒div等高，padding上下左右均加20px效果如图：在这里插入图片描述

如果margin：0 20px；
鼠标hover灰色区域不是想要的效果：

在这里插入图片描述

padding： 0 20px； hover的时候灰色区域是想要的效果

注意：行内元素为了照顾兼容性，尽量设置左右内外边距，不要设置上下内外边距。
相邻块元素尽量只给一个盒子添加margin值防止塌陷；嵌套块元素塌陷可以为父元素定义上边框/定义上内边距/添加overflow:hidden

导航栏练习-a行内块转换