如何让<div id="content">与宽度960px的body同宽？代码排查求助

Hey there! Let's figure out why your <div id="content"> isn't aligning perfectly with your 960px-wide body and get it sorted out. Here are the most common culprits and actionable fixes:

1. Fix the Box Model (The #1 Cause of Width Mismatches) #

Browsers use the content-box model by default, which means any padding or border added to #content gets tacked on top of its set width. So if you set #content { width: 960px; } but also add padding: 20px;, the actual rendered width becomes 960 + 40 = 1000px—way wider than your body.

Fix this by switching to border-box for #content (it makes padding/border count toward the total width):

#content {
  box-sizing: border-box;
  width: 960px; /* Or use 100% to automatically inherit the body's width */
}

If you want this behavior for all elements (a popular best practice to avoid future layout headaches), add this at the top of your stylesheet:

* {
  box-sizing: border-box;
}

2. Reset Default Browser Styles #

Most browsers add tiny default margins/paddings to div elements. Even 10px of left margin can throw off your alignment. Override these defaults for #content:

#content {
  margin: 0;
  padding: 0; /* Adjust this if you need internal spacing—border-box will handle it without breaking width! */
}

3. Verify Your Body's Width & Centering #

Double-check that your body is actually set to 960px correctly. If you're centering the body (a common layout choice), your body CSS should look like this:

body {
  width: 960px;
  margin: 0 auto; /* Centers the body horizontally */
  padding: 0; /* Remove default body padding that might be pushing content out */
}

4. Troubleshoot with Developer Tools #

If the above fixes don't work, use your browser's DevTools (hit F12, then select the #content element):

• Go to the Computed tab to compare the actual rendered width of #content vs. your body.
• Check the Styles tab for conflicting rules (look for strikethrough styles or higher-priority selectors overriding your width settings).

Give these steps a shot, and if you still hit snags, feel free to paste the relevant CSS snippets from your stylesheet here—I’ll help you dig deeper!

内容的提问来源于stack exchange，提问作者Gabriel Eduard Niculita