html document width_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-16 23:07 出处：网络

can s开发者_如何学Pythonomeone plese clarify how to set width for an html document. i have set the width for my body tag and even made a wrapper div to set the width but still the page is running a fe

相关专题：css

You probably need to assign zero to the padding and the margin of body & html:

html, body {
  margin: 0;
  padding: 0;
}

The body tag has a default margin in all browsers. Maybe it's lacking a margin: 0px?

While it may be okay to do according to the rules (I don't know whether it is), giving the body tag a width doesn't sound right to me. If you need to confine your content to a certain area, better use a container <div> directly underneath <body>.

To follow up on what @pekka said:

The body tag has a default margin in all browsers

Browsers have different default styles, and this likely explains the extra margin or padding that you're seeing. For your css to behave as you expect, it's generally adviced to reset your css. In short, but defining certain styles across all elements, you eliminate these browser inconsistencies and can then trust that your styles will cascade as you want them too. This is why setting the margin on the HTML and BODY elements eliminates the extra space mentioned in the question.

Eric Meyer has good thoughts on this, and his reset is the one I've seen most frequently used across the web. However, it should be noted that the extensive example below shouldn't be used without though. Tweak it to fit your project's needs

Ex (From Eric Meyer's Reset, link below):

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
 }

Check out these discussions for a more detailed explanation:

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Elements (such as the body tag) all have default margins and paddings, many of which are nonzero. That probably explains the extra pixels.

html, body {
    width: 800px;
    margin: 0;
    padding: 0;
}

This is an example of a CSS Reset: the concept is to eliminate browser-specific defaults so that you can control the exact appearance across all browsers. In this incremental reset, we eliminate margin and padding on the two elements that are probably responsible for your extra pixels.

width for my body tag

Some browsers (such as many versions of Internet Explorer) do not allow you to set a width on the body element. It is usually better to add a wrapper div and style that instead