<section>のHTML/CSSパディングが機能していません。

Question

screenshot of problemページの内容を含むセクションのパディングは、端から端まで隙間なく移動します。

HTML：

<section> 
    <heading> 
     <h2>Welcome to Funky Munky!</h2> 
    </heading> 
    <article> 
     <p> 
      New in Cedar City, UT 
     </p> 
    </article> 
</section> 

CSS：

section { 
    width: 100%; 
    margin: 1% 0; 
    padding: 2%; 
    background-color: #f5c300; 
    opacity: 0.7; 
    color: #000; 
    text-align: center; 
} 

Answer 1

使用box-sizing: border-box：それなし

section { 
    width: 100%; 
    margin: 1% 0; 
    padding: 2%; 
    background-color: #f5c300; 
    opacity: 0.7; 
    color: #000; 
    text-align: center; 
    box-sizing: border-box; 
} 

は、各側に2％のパディングの100％の幅に加算されますボックスには、104％の合計幅があり、したがってページよりも大きくなります。

更新

あなたは、問題の画像を掲載しましたので、あなたがページの端とボックス自体の間にいくつかの間隔を望んでいるようです。あれは正しいですか？

の場合は、margin: 1% 0ではなく、margin: 1%に余白を変更します。次に、幅を98％（両側に100％〜1％）に変更します。

これで設定したように、要素の上下に1％のマージンがありますが、要素の左右に余白はありません。

内側の間隔（ボックスの端と内側の内容の間隔）は余白です。余白はボックスの端と外側の他の要素の間隔です。

Answer 2

94％ マージン 幅

section { 
    width: 98%; 
    margin: 2% 2%; 
    padding: 0%; 
    background-color: #f5c300; 
    opacity: 0.7; 
    color: #000; 
    text-align: center; 
} 

Answer 3

変更、これを試してみてください：スペースの1％がそれぞれの側に余白（2％） のためにとのために消えてしまいますように、1％

パディング各側に2％（4％）

したがって、 幅= 100 - 2から4 = 94％

section { 
 
    width: 94%; 
 
    margin: 1%; 
 
    padding: 2%; 
 
    background-color: #f5c300; 
 
    opacity: 0.7; 
 
    color: #000; 
 
    text-align: center; 
 
}

<section> 
 
     <heading> 
 
      <h2>Welcome to Funky Munky!</h2> 
 
     </heading> 
 
     <article> 
 
      <p> 
 
       New in Cedar City, UT 
 
      </p> 
 
     </article> 
 
    </section>

Answer 4

私は、あなたが「オレンジ」のボックスがその周りにいくつかのスペースを持つようにしたいと仮定しています。

ここで問題となるのは、セクション内にパディング設定が存在することです。つまり、作成するエッジからの間隔はすべてオレンジ色のボックス内になります。しかし、ボックスの内容は、縁から離れて内向きに強制されます。

ボックスの外側を空白にしたい場合は、マージンを1％1％に変更することをお勧めします（2番目の1％は左右にあります）。マージン％X 2 +（パディング％* 2）だけ幅を小さくします。この場合、幅は88％になります（両側に1％のスペースを確保するため）。このような

：

width: 88%; /* padding x2=10 + margin*2 = 2 */ 
margin: 1% 1%; 
padding: 5%; 

このフィドルが、これは、同じサイズの箱を生み出す2つのマージンとパディングの設定を使用して示しています。 https://jsfiddle.net/wkaskie/wdarLbpt/1/

Answer 5

パディング/マージンの存在を模倣するように幅を調整することで同じ効果が得られるように見えます。ただ、左/右のパディングを削除し、余白自動でセクションセンター：

section { 
width: 96%; 
margin: 1% auto; 
padding: 2% 0; 
background - color: #f5c300; 
opacity: 0.7; 
color: #000; 
text-align: center; 

}