CODEWITHSUNDEEP
htmlcss
user4451265
user4451265

Reputation:

Why is width of the html element not set to 100% of the page?

I'm in the beginning of HTML and CSS and I'm stuck in the layout area and position things, One of the most confusing things I face is: the html width is related to the width of its child, By inspecting element in the browser its width changes along with the width of its child. Although when I apply linear gradient to it (html) and draw a border around it, the border surround just that inherited width (from the child!!), but the gradient applied to the full page and outside the border, as it applied to the margin!! the most confusing:: that gradient width is equal to the width of the (say div element inside the body) and is repeated for the whole page! What's going on?!

the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html
        {
            border:5px solid red;
            background-image:linear-gradient(to top, yellow, blue);
        }
        div
        {
            border:5px solid green;
        }
        h1
        {
            background-color:lightslategray;
            border:5px solid black;
            margin:0px;
        }
    </style>
</head>
<body>
    <div>
    <h1>div is the standard block-level element. A block-level element starts on a new line and stretches
    out to the left and right as far as it can. Other common block-level elements are p and form,
    and new in HTML5 are header, footer, section, and more.</h1>
    </div>
</body>
</html>

Upvotes: 2

Views: 1402

Answers (2)

Freijlord
Freijlord

Reputation: 96

First off, there is little to no reason putting graphics inside the <html> tag. Use the body tag for all your graphical needs, since that will be the visible part of the webpage and use the HTML strictly for rules applying to the wole page, such as the default font.

If you want a border around the whole page, use the <body> instead.

The reason is because all elements stack inside one other, and a border is drawn Around the element. You can put the border inside the element by using box-sizing: border-box; in your css.

For the HTML not using the full page, you can set that by using width: 100%; and height: 100%;. HTML follows the rules it is given, and by default it only uses the space it is required instead of using everything it can.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128796

The html and body tags are special in that they define the background of a website as a whole; by default this is often white (#fff). However these elements themselves do not fill the entire screen space by default, they are only as large as the content found within (unless otherwise specified through styling).

If the background of these elements didn't fill the entire screen, we'd be in a strange situation whereby the browser itself would have a background and the website would appear to sit on top of it. Developers would be forced to define the widths and heights of these elements if they didn't want the browser's own background to be visible, and I imagine testing would become a bit of a nightmare.

Upvotes: 0

Related Questions