Mastering CSS: Centering and spacing with `display: block` and margins

[Splendid Digital Solutions]

See the Pen
Untitled by Rajeev Bagra (@Rajeev-Bagra)
on CodePen.

Which chunk of the CSS code determines the vertical distance between header menu and below Google logo?
byu/DigitalSplendid incss

Comment
byu/DigitalSplendid from discussion
incss

Comment
byu/DigitalSplendid from discussion
inweb_design

Comment
byu/DigitalSplendid from discussion
inweb_design

Comment
byu/DigitalSplendid from discussion
inweb_design

Mastering CSS: Centering and Spacing with display: block and margins

Source: Generated taking help of ChatGPT

The CSS rule:

.logo img {
display: block;
margin: 100px auto 20px;
}

targets an image element within a container that has the class logo. Here’s a breakdown of what each part of the rule does:

display: block;

• Block-Level Element: The image is treated as a block-level element. This means it will start on a new line and take up the full width available, unless its width is specified.
• Full Control of Margins and Paddings: As a block-level element, it respects all margin and padding properties.
• Breaking Flow: It breaks the normal inline flow of text, causing elements before and after it to be on separate lines.

margin: 100px auto 20px;

This shorthand property sets the margins for the image on all four sides in the order: top, right, bottom, and left.

• 100px Top Margin: There is a 100px space above the image.
• auto Left and Right Margins: The auto value for left and right margins centers the image horizontally within its parent container. This only works because the image is a block-level element.
• 20px Bottom Margin: There is a 20px space below the image.

How It Works Together

• Centered Image: By using display: block and margin: auto for left and right margins, the image is centered horizontally within its parent container.
• Vertical Spacing: The top and bottom margins add extra space around the image, positioning it 100px from the top and 20px from the bottom of its surrounding elements or container.

Example

Here’s an example to illustrate this:

<div class="logo"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Google" /></div>

.logo img {
display: block;
margin: 100px auto 20px;
}

• Effect: The image will be centered horizontally within the div with class logo, with 100px space above it and 20px space below it.

Visualization

-------------------------------------------------
| |
| |
| 100px |
| (margin) |
| ----------- |
| | Image | |
| | centered| |
| | within | |
| | parent | |
| ----------- |
| 20px |
| (margin) |
| |
-------------------------------------------------

This CSS rule is commonly used to center an image within its container and to add vertical spacing around the image.

 

 

[Author]

Posts