个人中心
gpt4 book ai didi

html flex : border around item without expand in height

转载 作者：行者123 更新时间：2023-11-28 15:06:16 25 4
gpt4 key购买 nike

在下面的示例中，边框不是围绕蓝色框，而是扩展到整个窗口高度。

关于在蓝色框周围制作边框的任何提示？

注意事项:

  • 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>

最佳答案

为什么不直接在#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>

关于html flex : border around item without expand in height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56941222/

25 4 0
文章推荐： css - 如何在 中使用 CSS 变量？
文章推荐： swift - 闭包在定义或首次调用时是否分配内存？
文章推荐： javascript - 不从静态(404 错误)Flaticon 和 Font-mfizz 加载图标 css
文章推荐： html - 将元素移出 CSS 网格中的列