如何在html元素之间创建一致的间距？

我即将开始一个大型的，面向设计的网站，只需要像素完美，尽可能好。如何在html元素之间创建一致的间距？

的问题是如何保持元素之间一致的间距在这样的容器：

目前我创建的所有容器与 padding: 40px 40px 30px与margin-bottom: 10px;

每一个元素这解决了问题很好，但是包括标题在内的每个元素都必须有10个像素，低于其自身。

目前我还用https://github.com/kiskadigitalmedia/kiskabricks_wedgecss（DIV与设定的高度），如果设计它调用创建额外的垂直空白。喜欢这里：

这是上面的例子代码：

<div class="card"> 
    <h1>Heading 1</h1> 
    <p>Paragraph text</p> 
    <div class="wedge-2x"> 
    <a class="btn">Button</a> 
</div>

请问这种做法是否合理？有没有更好的方法来保证容器内元素的间距一致？任何输入赞赏。

来源

2016-05-13 Martin Gottweis

在一个点上，你说：“这很好地解决了这个问题”重写这个使用margin-top对于除了第一个所有元素，但你不说，剩下的问题是什么。做任何文字wordwrap的行？您是否担心更改字体可能会导致其他问题？ –

困扰我的一件事是，在heading1上不能有30px的顶边距。这样你就必须使用很多这些楔子来创建所需的空格。这是我对这项技术的主要关注 –

对不起，我似乎没有把握这个问题。你说：“包括标题在内的每个元素都必须有10个像素以下的像素，并且自身的像素高度为零。”所以你做对了。对？容器上有填充物，它已经解决了标题上方空间的问题？ –

如果你想例如一个10个像素的保证金以上&下方的元素，一个选择可能是这样的。 class="card"中的所有元素都将受到相同边距的影响。

.card{ 
padding: 40px; 
} 

.card h1, .card p, .card .wedge-2x, .card a{ 
margin: 30px 0px; 
}

来源

2016-05-13 09:33:27

不错。这就是我现在正在做的;-)不知道是否添加顶部边距是一个好主意 –

我会做这样的：

<div class="card"> 
    <h1>Heading 1</h1> 
    <p>Paragraph text</p> 
    <a class="btn">Button</a> 
</div>

CSS：

.card { 
    padding: 40px; 
    box-sizing: border-box; 
} 
h1, p { 
    margin-bottom: 10px; 
} 
.btn { 
    margin-top: 20px; 
    display: inline-block; 
}

来源

2016-05-13 09:37:35 Steveo

嘿，谢谢你的答案。问题是如果你在卡上只有一个按钮？比我们在顶部会有60px。看到这里：https://jsfiddle.net/2334eaop/ –

也许是这样的：https://jsfiddle.net/2334eaop/1/ – Steveo

是的，无空间课是一个想法。 –

这取决于你要多少灵活性有。你的解决方案看起来像一个好的开始。也许尝试和使用兄弟姐妹选择器？

所以在SCSS你会碰到这样的：

.card { 
    padding: 40px; 
    h1 ~ p, 
    h1 ~ a { margin-top: 10px; } 
}

或者使用+而不是~如果你想更具体的HTML结构。

或者你可以通过使用:first-child { ... }

来源

2016-05-13 21:04:23

如何在html元素之间创建一致的间距？

回答

相关问题