身体顶部间隙;我应该使用边距还是填充? [英] Body top gap; should I use margin or padding?

查看:86
本文介绍了身体顶部间隙;我应该使用边距还是填充?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,我正在一个带有固定标题(用于导航)的网站上工作.
我在 body 上使用 padding-top 来降低内容以适合标题.

So, I'm working on a website with a fixed header (which is used to navigate).
I use padding-top on body to lower the content to fit with the header.

这是现在的样子:

body
{
    background-color: red; 
    padding-top: 50px;
}
.header {
    background-color: yellow;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
}

<div class="header">
    Header
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.<br>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

我的问题是:在这种情况下,哪种方法更好? margin-top 还是 padding-top ?

My question is: What would be better to use in this situation? margin-top or padding-top?

推荐答案

没有实际的更好方法.只是给你的.也许一个渲染的速度会比另一个渲染的速度稍快,但是没有人会注意到.

There's no actual better way to do it. It's just to you. Maybe one will be slightly faster to render then another but nothing that someone could notice.

无论如何,技巧是将标头放置在固定的位置,以便其与用户一起向下滚动.

As a tip anyway is to make the header positioned as fixed so it scrolls down with the user.

这篇关于身体顶部间隙;我应该使用边距还是填充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆