Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Types of Boxes Generated in CSS
One or more boxes are generated for every element in a document tree after processing it under visual formatting model. A generated box has certain CSS properties associated with it and is accordingly rendered in HTML. To display elements, the following are the two common values −
block − Starts on a new line. Takes the full available width
Inline − Does not start on a new line. Tales only the required width
The following boxes are generated in CSS −
Block-level Elements and Block Boxes
Anonymous block boxes
Inline-level Elements and Inline Boxes
Anonymous inline boxes
Block-level elements and Black Boxes
Let's see an example of Block-level Elements and Block Boxes. The block-level elements we will use are: <form>, <fieldset>, <div>, etc.
Begin with creating a div parent container with some child containers −
<div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div>
Now, set the height and width of the child containers −
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
Set the colors for the child containers. You can use the nth-of-type() pseudo class −
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</fieldset>
</form>
</body>
</html>
Inline-level elements and inline boxes
Let's see an example for Inline-level Elements and Inline Boxes. The inline-level element we will used here is <span>. Set the inline element in the <div>. We have set the <span> inside the <div> −
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div>
Set the colors for the child containers set inside the parent <div>. You can use the nth-of-type() pseudo class −
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</fieldset>
</form>
</body>
</html>
1K+ Views
