Пробел над заголовком только в Google Chrome - PullRequest
0 голосов
/ 10 октября 2018

Как убрать лишний пробел над панелью навигации в Home tab?Я пытался стилизовать inline, но в нем появились другие навигационные меню и исправлены home. Снимок экрана

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;*/
}

1 Ответ

0 голосов
/ 12 октября 2018

Я бы рискнул предположить и сказать, что это причина:

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

Вы используете заполнение элемента body.Поскольку тело является основной оберткой, использование отступов ограничит все элементы внутри него, оставляя зазоры вокруг вашего сайта.

Установите оба отступа на 0px

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...