상단 메뉴에 여유 공간이 제거되었나요?[복제하다]

StackOverflow https://stackoverflow.com//questions/21068277

  •  26-12-2019
  •  | 
  •  

문제

상단 메뉴의 "내 인용문 ..."에는 사방에 여유 공간이 표시됩니다. 깨끗하고 전체 상단을 완전히 채울 수 있습니까?

HTML

        <ul class="topPanel">
        <li><h2>My Quotes</h2></li>
        <li><h2>LOGIN WITH 
          <a href="#" class="underline">EMAIL</a> 
          OR 
          <a href="#" class="underline">TWITTER</a>
          </h2>
      </li>
    </ul>

CSS

    <!-- /*Main settings, background*/ -->
html {
    background: url(http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/Rainbow-lanscape-nature-scenery-images-new-desktop-hd-wallpapers-landscape-widescreen.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
 }
<!-- /*top panel contains a name for the project from the left side and the 
ability to login via twitter and email*/ -->
.topPanel {
    list-style: none;
    margin: 0;

    color: #ffffff;
    background: #000000;

    padding:0px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}
    .topPanel li {
        margin: auto;
    }
        .topPanel li h2 {
            padding: 0 10px;
            margin: 3px;
            text-align: center;
        }
        /*Change the color of links when you hover*/
        .underline {
            color: #ffffff;
            text-decoration: underline;

            transition:color 1s;
            -webkit-transition:color 1s; 
        }
            .underline:hover {
                color: #eb005f;
            }
@media all and (max-width: 800px) {
    .topPanel {
        justify-content: space-around;
    }
}
@media (max-width: 600px) {
    .topPanel {
        -webkit-flex-flow: column wrap;
    }
}

Margin: 0 작동하지 않습니다.때로는 공간이 표시되지 않을 수도 있다는 것을 알았습니다.

Chrome 및 Firefox에서 테스트했는데 잘못된 표시와 동일한 상황이 발생했습니다. 시각적으로 여기서 볼 수 있습니다.

도움이 되었습니까?

해결책

기본값을 재설정해야 합니다. body 마진과 패딩

body
{
  margin:0;
  padding:0;
}

데모

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top