Create a Box Model using CSS (Cascading Style Sheets) Styles as shown below

belongs to collection: HTML + CSS Examples

YasminRadwan26

Save to bookmark

2022-06-01

373

Create a Box Model using CSS (Cascading Style Sheets) Styles as shown below

Html programming, Css programming, examples, Html programming examples, Css programming examples,

All Answers

YasminRadwan26

2022-06-01

need an explanation for this answer? contact us directly to get an explanation for this answer

<html><head><title>css style</title>
</head>
<body><center>
<table border="1" height="600" width="600" align="top" bgcolor="magenta" style="margin-top:10px">
<tr><td>
<table border="2" height="85%" width="85%" bgcolor="pink" style="margin-left:50px"><h2 align="center">Margin</h2>
<tr><td>
<table border="3" height="80%" width="80%" bgcolor="yellow" style="padding:20px;margin-left:48px"><h2 align="center">Border</h2>
<tr><td>
<table border="2" height="70%" width="70%" bgcolor="red" style="margin-left:50px"><tr><h2 align="center">Padding</h2>
<td align="center"><h2 align="center">Element Content</h2>Therefore, to ascertain the total space required to place an element on the page, 
add the content area’s dimensions to any padding, borders, and margins that have been declared.</td>
</tr>

</table>
</td></tr></table></td></tr></table></td></tr></table></body></html>

<html>
<head>
<style>
#in
{
 width:20%;
 height:25%;
 padding:90px;
 margin-top:40px;
 transform: rotate(-10deg);
background-color:mediumorchid;
border-color:black;
}
#d
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
background-image:url("na.jpg");
opacity: 0.8;
border-color:black;
}
#e
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
border-color:black;
background-image:url("t1.jpg");
opacity: 0.8;
}

table
{
 width:20%;
 height:30%;
margin-top:-13%;
margin-left:40%;
transform: rotate(-10deg);
border-style:solid;
border-color:yellow;
}
#td1
{
color:red;
border:none;
padding-left:29%;
}
</style>
</head>
<body bgcolor="LIGHTCORAL">
<marquee>
<b style="font-size:30px;color:brown">
BOX MODEL HIERACHY
</marquee>
<br><br><br><br><br><br>
       <p style="margin-left:30px">
<input type="textfield" id="in">
<input type="textfield" id="d">
<input type="textfield" id="e">
<table border="1">
<tr>
<td id="td1">
The box model is the specification that defines how a box and its attributes relate to each other.
</td>
</tr>
</table>
</p>
</body>
</html>

Output: