Question

在下面的示例中，边框不在蓝色框周围，而是在所有窗口高度上扩展。

是否有任何建议在蓝色框周围划上边框？

注意：

html和主体定义不能更改。
不能更改“ div1”中的填充。
我尝试了与“ display：inline-block”等不同的组合，但是没有成功。
这个问题很可能已经被问到了。但是，我对答案的搜索失败。欢迎提供良好的“重复”提示。

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em; 
	border: 1px solid green;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
}

<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
</body>
</html>

Answer 1

为什么不直接在 #blueDiv 上使用 outline 和 outline-offset ？

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
	/* OUTLINE */
	outline: 1px solid green; 
	outline-offset: 5px; 
}

<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
    <p>There is a green border around the blue box, distant 5 pixels.</p>
</body>
</html>

Answer 2

将此添加到您的代码中：

* {
  box-sizing: border-box;
}

html flex：项目周围的边框，高度不扩展

2 个答案: