| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
1. block
- Description: Elements with ‘
display: block‘ take up the full width available, and each element starts on a new line. Block elements respect width and height properties. - Examples: ‘
<div>‘, ‘<p>‘, ‘<h1>‘ to ‘<h6>‘, ‘<ul>‘, ‘<li>‘, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block Example</title>
<style>
.block-element {
display: block;
width: 50%;
border: 1px solid black;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="block-element">This is a block element.</div>
<div class="block-element">Another block element.</div>
</body>
</html>
2. 'inline'
- Description: Elements with ‘
display: inline‘ do not start on a new line and only take up as much width as necessary. Inline elements do not respect the width and height properties. - Examples: ‘
<span>‘, ‘<a>‘, ‘<strong>‘,’<em>‘, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Example</title>
<style>
.inline-element {
display: inline;
border: 1px solid black;
}
</style>
</head>
<body>
<span class="inline-element">This is an inline element.</span>
<span class="inline-element">Another inline element.</span>
</body>
</html>
3. 'inline-block'
- Description: Elements with ‘
display: inline-block‘ are similar to inline elements, but they respect width and height properties and can have margins and padding. - Examples: Custom buttons, styled list items, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline-Block Example</title>
<style>
.inline-block-element {
display: inline-block;
width: 150px;
height: 50px;
border: 1px solid black;
margin: 5px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="inline-block-element">Inline-Block 1</div>
<div class="inline-block-element">Inline-Block 2</div>
<div class="inline-block-element">Inline-Block 3</div>
</body>
</html>
4. 'none'
- Description: Elements with ‘
display: none‘ are not rendered on the page at all, meaning they don’t occupy any space and are not visible. This is different from ‘visibility: hidden‘, which hides an element but still takes up space. - Examples: Elements that need to be toggled or hidden dynamically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>None Example</title>
<style>
.none-element {
display: none;
}
</style>
</head>
<body>
<div class="none-element">This element is not visible.</div>
<div>This element is visible.</div>
</body>
</html>
Comparison
Here’s a side-by-side comparison to see how these properties affect elements differently:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comparison Example</title>
<style>
.block-element {
display: block;
width: 50%;
border: 1px solid black;
margin: 10px 0;
}
.inline-element {
display: inline;
border: 1px solid black;
}
.inline-block-element {
display: inline-block;
width: 150px;
height: 50px;
border: 1px solid black;
margin: 5px;
text-align: center;
line-height: 50px;
}
.none-element {
display: none;
}
</style>
</head>
<body>
<div class="block-element">Block Element</div>
<span class="inline-element">Inline Element</span>
<span class="inline-element">Another Inline Element</span>
<div class="inline-block-element">Inline-Block 1</div>
<div class="inline-block-element">Inline-Block 2</div>
<div class="none-element">This is not visible.</div>
</body>
</html>
In this comparison, you’ll see how block elements take up full width and start on a new line, inline elements flow within the line of text, inline-block elements respect width and height, and none elements are not rendered at all.
