- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
How to specify the type of box used for an HTML element using CSS?
Use the display property to specify the type of box used for an HTML element.
Example
You can try to run the following code to implement the display property to display flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 90px;
font-size: 40px;
width: 100px;
margin: 50px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div style = "align-self: center">Q4</div>
<div>Q5</div>
</div>
</body>
</html>
- Related Articles
- How to specify a unique id for an element in HTML?
- Specify the left padding of an element with CSS
- Specify the bottom padding of an element with CSS
- Specify the top padding of an element with CSS
- Specify the right padding of an element with CSS
- How to specify the usage of an element using the tabbing order (tab keyboard button) in HTML?
- How to set the type of positioning method used for an element with JavaScript?
- How to use inline CSS style for an element in HTML?
- Using more than one CSS classes for an element in HTML
- How to specify the number of columns an element should be divided into with CSS
- How to specify that an element is not yet relevant in HTML?
- How to specify whether the content of an element should be translated or not in HTML?
- How to specify double border using CSS?
- How to specify the language of the element's content in HTML?
- How to specify that the element is read-only in HTML?
Advertisements