QuitExams

Introduction to Block Properties

In CSS, block-level properties define the structure and layout of block elements — elements that take up the full width of their parent container (like <div>, <p>, <h1>–<h6>). These properties control how an element’s box behaves in the document flow, including its width, height, margin, padding, display type, and overflow.

• width and height
• display
• margin
• padding
• overflow
• visibility

1. width and height

The width and height properties define the size of a block element. You can specify them in pixels (px), percentages (%), or viewport units (vw, vh).

Syntax: width: 200px; height: 150px;

<style>
div {
  width: 300px;
  height: 150px;
  background-color: lightcoral;
  color: white;
  text-align: center;
  line-height: 150px;
}
</style>
<div>300px × 150px Box</div>

Explanation: The div is set to a fixed size. Width and height define the block’s dimensions.

2. display

The display property controls how an element is displayed in the document. Common values are block, inline, inline-block, none, and flex.

Syntax: display: block;

<style>
span {
  display: block;
  background-color: lightgreen;
  margin: 10px 0;
}
</style>
<span>Block Span 1</span>
<span>Block Span 2</span>

Explanation: The span elements behave like blocks — each appears on a new line.

3. margin

The margin property defines the space outside an element’s border. It can be set for all sides or individually: margin-top, margin-right, margin-bottom, and margin-left.

Syntax: margin: 20px;

<style>
div {
  background-color: lightblue;
  margin: 20px;
  padding: 10px;
  border: 2px solid #333;
}
</style>
<div>This box has 20px margin.</div>

Explanation: Margin creates space around the element, separating it from others.

4. padding

The padding property defines the space inside an element — between the content and its border.

Syntax: padding: 15px 30px;

<style>
div {
  background-color: lightgoldenrodyellow;
  padding: 30px;
  border: 2px solid orange;
}
</style>
<div>This box has inner padding.</div>

Explanation: Padding adds internal space, pushing the text away from the borders.

5. overflow

The overflow property specifies what happens when content overflows an element’s box. Common values: visible, hidden, scroll, and auto.

Syntax: overflow: auto;

<style>
div {
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 2px solid gray;
}
</style>
<div>
  This text is long and will overflow the box. It shows scrollbars automatically when content exceeds the box size.
</div>

Explanation: The scroll value allows users to scroll inside the box when content is too large.

6. visibility

The visibility property controls whether an element is visible or hidden. Unlike display: none, it hides the element but still takes up space.

Syntax: visibility: hidden;

<style>
p {
  visibility: hidden;
}
</style>
<p>This paragraph is hidden but still occupies space.</p>

Explanation: The text is invisible, but the space it occupies remains.

Conclusion

CSS Block Properties form the backbone of layout control. By mastering width, height, display, margin, and padding, you can precisely design structured web layouts and control spacing effectively.