Question

如何在Home tab的导航栏上方删除多余的空间？我尝试设置内联样式，但是它使其他导航菜单无法使用并修复home。 Screenshot

HTML

        <header id="masthead" class="site-header clearfix">
            <div id="header-text-nav-container" class="clearfix">
                <div class="top-bar">
                    <div class="inner-wrap clearfix">

                        <div id="header-left-section">
                                <div id="header-logo-image">
                                    <a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><img src="<?php echo esc_url(get_theme_mod('colormag_logo')); ?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"></a>
                                </div><!-- #header-logo-image -->
                        </div><!-- #header-left-section -->

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
html {
    overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
----------------------------------------------- */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height:1%;
}
.clearfix {
    display: block;
}
/* =BODY
----------------------------------------------- */
body {
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: cover;
}
#page {
    max-width: 1200px;
    margin: 0 auto;
}
.wide {
    padding-top: 0;
    padding-bottom: 0;
}
.wide #page {
    max-width: 100%;
    overflow-x: hidden;
}
.inner-wrap {
    margin: 0 auto;
    max-width: 970px;
}
#header-text-nav-container {
        background-color: #fff;
}*/
#header-text-nav-wrap {
    /*padding: 20px 0 25px;*/
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
#header-left-section {
    float: left;
}
#header-logo-image {
    float: left;
    padding-right: 20px;
    width: 160px;
}
#header-logo-image img {
    margin-bottom: 5px;
    max-height: 58px;
}
#header-text {
    float: left;
    padding-right: 20px;
}
#site-title {
    padding-bottom: 0;
    line-height: 1.3;
}
#site-title a {
    color: #da3532;
    font-size: 46px;
}
#site-description {
    line-height: 24px;
    font-size: 16px;
    color: #666666;
    padding-bottom: 0px;
    /*  font-family: 'SimHei', '黑体', 'STHeiti', '华文黑体', 'Helvetica Neue', Arial, Helvetica, sans-serif;*/
}

Answer 1

我会冒险猜测并说这是原因：

    body {
      padding-top: 10px;
      padding-bottom: 10px;
      background-size: cover;
    }

您正在body元素上使用填充。由于主体是主要包装材料，因此在其上使用填充将限制其中的所有元素，从而在您的站点周围留下空白。

将两个填充都设置为0px

标头上方仅在Google Chrome中有空格

1 个答案: