保證金在右邊沒有顯示

我是新來的HTML和CSS，我有一個關於保證金的問題。保證金在右邊沒有顯示

我在頁面的左側和右側添加了40px的頁邊距，但頁面右側的頁邊距未顯示。會喜歡一些幫助和建議，爲什麼會發生這種情況。謝謝！

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
@font-face { 
 
    font-family: 'Apercu-Bold'; 
 
    src: url('../fonts/Apercu-Bold.otf'); 
 
} 
 
@font-face { 
 
    font-family: 'Apercu-Regular'; 
 
    src: url('../fonts/Apercu-Regular.otf'); 
 
} 
 
.full-width { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin-left: 40px; 
 
    margin-right: 40px; 
 
} 
 
.appstore-btn-container { 
 
    position: absolute; 
 
    text-align: center; 
 
    bottom: 40px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
/*SECTION ONE*/ 
 

 
.banner_container1 { 
 
    background-image: url(../images/adventuretimes-hero.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: relative; 
 
    border-radius: 8px; 
 
    height: 600px; 
 
} 
 
.content1 { 
 
    padding: 220px 10%; 
 
    text-align: center; 
 
} 
 
.content1 h1 { 
 
    color: white; 
 
    font-size: 50px; 
 
    font-family: 'Apercu-Bold'; 
 
    line-height: 60px; 
 
    letter-spacing: 1px; 
 
    margin-bottom: 10px; 
 
} 
 
.content1 p { 
 
    margin-top: 20px; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: 'Apercu-Bold'; 
 
    font-size: 12px; 
 
    letter-spacing: 1.3px; 
 
    line-height: 25px; 
 
} 
 
.top-text-container { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 40px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100%; 
 
} 
 
.path { 
 
    vertical-align: middle; 
 
} 
 
.path img { 
 
    vertical-align: middle; 
 
}

<section class="full-width banner_container1"> 
 
    <div class="content1"> 
 
    <div class="top-text-container"> 
 
     <h1>Discover the Best Outdoor <br> Adventures Near you</h1> 
 
     <div class="path"> 
 
     <img src="images/Path.png" alt=""> 
 
     </div> 
 
     <p>ADVENTURE TIMES IS THE BEST PLACE TO FIND OUTFOOR <br> ADVENTURES ANYWEHRE YOU GO.</p> 
 
    </div> 
 
    <div class="appstore-btn-container"> 
 
     <img src="images/appstore-white.png" alt="appstore button" width="230px"> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-12-05 Geraldine Morales

既然你給了full-width元件100％和保證金，你需要從中減去保證金，這樣

.full-width { 
    width: calc(100% - 80px); 
    box-sizing: border-box; 
    margin-left: 40px; 
    margin-right: 40px; 
}

注意，box-sizing: border-box用不了保證金考慮在內，只是邊界和填料。

來源

2016-12-05 19:10:58 LGSon

非常感謝您花時間回覆。真的很感謝幫助！ –

將HTML設置爲100％寬度以及容器元素。所以你的容器元素佔據了瀏覽器寬度的100％。然後它被左邊的邊緣推向右邊40px。您的保證金權利可能就在那裏，它只是在頁面之外。

我可能會推薦使用一個容器元素，它的全寬度爲40px，並且裏面有另一個元素來獲得相同的效果。

來源

2016-12-05 19:11:49

@ LGSon的回答也很好。 –

非常感謝您的回覆！ –

您想設置.full-width使其最大寬度爲100％.vs正常寬度爲100％。

.full-width { 
    max-width: 100%; 
    box-sizing: border-box; 
    margin-left: 40px; 
    margin-right: 40px; 
}

寬度不包括填充，保證金，或邊境所以它把你的屏幕的寬度並添加到40點每端（因此溢出）。如果您在body或html中設置了寬度，那麼您的部分將佔用該寬度的100％，並將40px添加到該寬度。最大寬度可防止節元素佔用頁面的100％以上（包括頁邊距，填充和邊框）。

來源

2016-12-05 19:13:22 Benneb10

非常感謝您的回覆 - 這非常有幫助！ –

不客氣，我會建議將body設置爲100％的寬度，並將其作爲默認寬度類型，而不是使用類來設置全寬。 @GeraldineMorales – Benneb10

_Width不包括填充，邊距或邊框_ ...是的，對於邊框和填充，使用'box-sizing：border-box;' – LGSon

保證金在右邊沒有顯示

回答

相關問題