gpt4 book ai didi

html - 避免在 CSS 中加倍边距和填充

转载 作者:太空宇宙 更新时间:2023-11-03 20:04:29 24 4
gpt4 key购买 nike

我有一个简单的例子,它对我来说似乎很合理,但我不知道如何在 HTML/CSS 中建模。

我想创建一个以 px 为单位的固定宽度容器,并以 px 为单位进行填充。在内部,我想显示三个段落,以 em 单位的垂直边距分隔。

宽度和填充应以像素为单位,以便我可以校准到屏幕尺寸。边距应以文本为单位,因此间距会根据字体大小的变化进行调整。到目前为止,这一切都是有道理的。

Example of desired result

问题是,最明显的 HTML/CSS 实现给了我不想要的前导和尾随边距。

Example with undesirable leading and trailing margins

<html>
<head>
<style>
div {
width: 300px;
padding: 10px;
border: solid black 1px;
}

p {
margin-top: 1em;
margin-bottom: 1em;
border: dotted black 1px;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>
</html>

有没有一种好的、通用的方法可以在不篡改第一个和最后一个 p 元素的边距的情况下实现这一点?显然,我可以抑制那些特定的边距,但这不是一个可扩展性很强的解决方案。

最佳答案

其实有办法,css-tricks对于 :first-child 和 css-tricks对于:最后一个 child 。

关于html - 避免在 CSS 中加倍边距和填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58481650/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com