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
Type 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
