まず最初にbody要素にwidth"表示領域(コンテンツが表示される領域)の幅"を1000pxで設定します。
marginはbody要素の上下を0、左右をautoにします。そうすることで、
ビューポートからwidthで設定した1000pxを引いたものが２等分され、左右に自動で適用されます。
この均等な左右のmarginによりwidthの表示領域が中心に寄る仕組みです。
※ユーザーデバイスのpx数(画面サイズ)を「ビューポート(Viewport)」と呼びます。
※したがって、携帯・タブレット・ＰＣなど、ビューポートは使用される端末によって異なります。
そのため1000pxを下回るビューポートに対しては、画面に対して見切れて表示されることになります。
body {
width: 1000px;
margin: 0 auto;
background-color: lightcyan;
padding: 25px 0 0;
}
＋＠ 最後にpaddingを設定していますが、これはページのトップに"body要素の背景色で"間隔を空けるために記述しています。
marginは、あくまで要素間の間隔を調節する『余白』なので、body要素に記述されている一方でボックスの「外側」です。
body要素の背景色が反映されるのは、ボックスの中身(content+padding)の部分なので、marginを使用するとhtml要素で設定している#ffffccの最背面の色が適用されてしまいます。