Working with Block-Level Elements
Block-level elements can be identified as rectangular, and they stack on top of each other. They prevent any other elements from sharing the same line with them. This behavior is achieved by applying the CSS property:
display: block;
Main considerations when working with block-level elements:
- They are inherently set to
display: block; - Their
widthspans the entire width allowed by the parent element; - The
heightis initially determined by content, but it can be customized using CSS; - Each block element starts on a new line;
- Properties like
border,margin,padding,width, andheightcan be adjusted.
Now, let's explore an example where we manipulate width, height, and margin:
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="main-box">
<div class="first-box">1</div>
<div class="second-box">2</div>
<div class="third-box">3</div>
</div>
</body>
</html>
.main-box {
background-color: indianred;
width: 100px;
height: 100px;
}
.first-box {
background-color: darkmagenta;
width: 30px;
height: 40px;
margin-left: 20px;
}
.second-box {
background-color: thistle;
width: 30px;
height: 15px;
margin-left: 30px;
}
.third-box {
background-color: olivedrab;
width: 50px;
height: 45px;
margin-left: auto;
}
Let's consider how we can center an element inside its parent.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="parent">
Parent Element
<div class="child">Child Element</div>
</div>
</body>
</html>
.parent {
background-color: #4F5E77;
color: #ffffff;
width: 300px;
height: 100px;
}
.child {
background-color: #1e2635;
color: #ffffff;
width: 60px;
height: 60px;
/* We can give `auto` value to the `margin` property to recenter the element. */
margin-left: auto;
margin-right: auto;
}
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 8
