background color for body element with predefined height in css
Question
I have a html page which looks like this
body { height: 200px; background-color: lightblue; padding: 0px; border: 1px solid red; }
<html> <head> </head> <body> <p> First para </p> <p> Second para </p> </body> </html>
Here I specified body height as 200px and background-color for body element as "lightblue". Why is the background-color for body getting applied to the whole page and not only 200px height of the body?
1 answers
solution1
7 ACCPTED 2017-05-30 12:41:45
In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
Source: css-tricks.com
So, to prevent this, you can simply define background-color:white for html .
html { background-color: white; } body { height: 200px; background-color: lightblue; padding: 0px; border: 1px solid red; }
<html> <head> </head> <body> <p> First para </p> <p> Second para </p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.