关于行内元素可以设置padding,border的测试

关注

原创最新推荐文章于 2026-02-19 03:29:11 发布 4.5k 阅读 AI 写同款· GEO 优化 ›

CSS盒模型深度解析：padding、margin、border与box-sizing原理 CSS盒模型是网页布局的底层基石，定义了元素content、padding、border、margin四层空间关系及其尺寸计算逻辑。其核心在于理解不同box-sizing模式（content-box与border-box）如何影响最终渲染宽度，以及padding和margin在布局中的本质差异——前者扩展可点击区域并支撑圆角阴影，后者则因外边距折叠（margin collapse）表现出非线性叠加特性。掌握这些原理，能系统解决元素宽高失控、间距异常、跨浏览器错位等高频问题，并为响应式设计、性能优化（如con 阅读详情

一、总结

块级元素设置padding，border改变布局，改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）。

行内元素设置padding，border在应用背景图片的时候会有显示，但是不改变垂直方向的布局。结果会出现设置后padding，border的背景会覆盖上面的元素的内容，下部被当做背景，被下级元素覆盖。

二、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test a border</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<style type="text/css">
	<!--
	body {
		background-color: #9DD100;
	}
	a:link, a:visited {
		text-decoration: none;
		border: 1px dotted #000;
	}
	a:hover, a:focus, a:active {
		border-style: solid;
	}
	.one {
		border: 20px solid white;
		padding: 10px;
	}
	.one:hover {
		border: none;
	}
	-->
	</style>
</head>
<body>
<br/>
	<a href="http://wef.com">baidu.com</a>
	<hr/>
	<span class="one">BAIDU</span>
	<span>GOOGLE</span>
	<p>YAHOO</p>
</body>
</html>

<1>鼠标未经过时