display property of an object determines how it is rendered by the browser.
It’s a very important property, and probably the one with the highest number of values you can use.
Those values include:
table(and all the
plus others you will not likely use, like
Choosing any of those will considerably alter the behavior of the browser with the element and its children.
In this post I’ll analyze the most important ones not covered elsewhere:
I cover others in separate posts:
Inline is the default display value for every element in CSS.
All the HTML tags are displayed inline out of the box except some elements like
section, which are set as
block by the user agent (the browser).
Inline elements don’t have any margin or padding applied.
Same for height and width.
You can add them, but the appearance in the page won’t change - they are calculated and applied automatically by the browser.
inline, but with
height are applied as you specified.
As mentioned, normally elements are displayed inline, with the exception of some elements, including
which are set as
block by the browser.
display: block, elements are stacked one after each other, vertically, and every element takes up 100% of the page.
The values assigned to the
height properties are respected, if you set them, along with
display: none makes an element disappear. It’s still there in the HTML, but just not visible in the browser.
Download my free CSS Handbook
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox