使用較小的瀏覽器窗口在某些元素的左右邊緣處優雅地添加填充

Question

我會直接跳到代碼中以便於解釋。我有一個自動加載，並從另一個HTML文件中像這樣插入一個圖片庫（有字幕文本）一個簡單的摺疊式菜單：

<section> 
    <a class="box-link" href="#.html">Link 1</a> 
     <div class="image-gallery"> 
      <img src="1.jpg"> [...] 
      <p>Example loaded paragraph of text</p> 
     </div> 
    <a class="box-link" href="#.html">Link 2</a> 
    <a class="box-link" href="#.html">Link 3</a> 
    <a class="box-link" href="#.html">Link 4</a> 
</section> 

而這種相關CSS：

section { 
    width: 100%; 
    max-width: 60em; 
    margin: 0 auto; 
} 

.box-link { 
    display: block; 
    box-sizing: border-box; 
    padding: 1em; 
    width: 100%; 
} 

在一個大的瀏覽器窗口部分寬度最大值爲60em，並居中顯示在屏幕上。每一部分內容都被刷新到列的邊緣，排列得很好。

當瀏覽器窗口小於60em時，所有內容都變爲100％寬度，而且正是我想要的 - 除了標籤以外。在此狀態下，我希望p標記在左側和右側具有額外的1em邊距或填充以防止與頁面邊緣碰撞。

添加padding: 0 1em;的部分標籤實現正是我想要的p標籤，但一切變得填充爲好，這是我不希望 - 在一個大的瀏覽器窗口，寬度仍處於60em上限。一旦窗口大小減小到60em以下，填充是可見的。

所以，問題是：是有只有p在這個「自動」時尚標籤一個客場實現微胖/保證金，否則我將不得不訴諸使用媒體查詢申請像p { padding: 0 1em; }小屏幕？

謝謝。

Answer 1

我覺得媒體查詢是唯一的，最好的選項 -

@media screen and (max-width:480px) { 
    p { padding: 0 1em; } 
}