Inheritance in CSS properties
Here, In this example I have two divisions where one is nested within
another. I'm calling the outer division a parent and the division which is
nested a child.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untilted</title>
<style type="text/css">
/* for parent div tag*/
#parent{
width: 500px;
height: 300px;
z-index: 1;
background-color: #CCC;
border:thin solid black;
margin:25px;
padding:20px;
}
/* for child div tag */
#child{
border:thin solid #F00;
height:50px;
background-color:#FFC;
}
</style>
</head>
<body>
<!-- Start of parent tag -->
<div id="parent">
<p> This is parent div tag. </p>
<!-- Child div tag -->
<div class="box">
<p> This is child div tag. </p>
</div>
<!-- End of parent tag. -->
</div>
</body>
</html>
It looks like this in the web browser:
My question is: How does the child div tag gets it's the size of it's
width? Is it because of inheritance from the parent div tag or is it just
by default behavior that it will expand up to the parent div container if
you don't specify a width?
No comments:
Post a Comment