Scribd
Upload
17 views5 pages

3.6. Display Properties, Spacing, Positioning

Uploaded by

pratikraya12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views5 pages

3.6. Display Properties, Spacing, Positioning

Uploaded by

pratikraya12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Display Properties

The display property in CSS determines how an element is displayed on the web page.
There are some common values:
● block
● inline
● inline-block
● none

block: The element is displayed as a block, taking up the full width available and
starting on a new line.

.block-element {
display: block;
}

inline: The element is displayed inline with the content around it, taking up only as
much width as necessary.

.inline-element {
display: inline;
}

inline-block: The element is displayed inline but behaves like a block element, allowing
you to set its width and height.

.inline-block-element {
display: inline-block;
}

none: The element is not displayed at all (it is removed from the document flow).

.hidden-element {
display: none;
}

Prepared by: Prakash Adhikari


Margins
Margin is the space outside the border of an element.

Margin Properties
Individual Sides:
● margin-top: Sets the top margin.
● margin-right: Sets the right margin.
● margin-bottom: Sets the bottom margin.
● margin-left: Sets the left margin.

Shorthand Property:
● margin: Sets all four margins at once using one, two, three, or four values.
● margin: 10px; (all sides)
● margin: 10px 20px; (vertical horizontal)
● margin: 10px 20px 30px; (top horizontal bottom)
● margin: 10px 20px 30px 40px; (top right bottom left)

Special Values
● auto: Used for centering block-level elements horizontally.

Example:

div {
margin: 15px;
}

Padding
Padding is the space inside the border of an element, between the content and the
border.

Padding Properties
Individual Sides:
● padding-top: Sets the top padding.
● padding-right: Sets the right padding.
● padding-bottom: Sets the bottom padding.
● padding-left: Sets the left padding.

Prepared by: Prakash Adhikari


Shorthand Property:
● padding: Sets all four paddings at once using one, two, three, or four values.
● padding: 10px; (all sides)
● padding: 10px 20px; (vertical horizontal)
● padding: 10px 20px 30px; (top horizontal bottom)
● padding: 10px 20px 30px 40px; (top right bottom left)

Example:

div {
padding: 15px;
}

Positioning
The position property specifies the type of positioning method used for an element.
There are five different position values:
● static
● relative
● fixed
● absolute
● sticky
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first. They
also work differently depending on the position value.

Static
This is the default value. Elements are positioned according to the normal flow of the
document. top, right, bottom, and left properties have no effect.

.static-element {
position: static;
}

Relative
The element is positioned relative to its normal position. Setting top, right, bottom, and

Prepared by: Prakash Adhikari


left will cause the element to be adjusted away from its normal position, but it will still
occupy its original space.

.relative-element {
position: relative;
top: 10px; /* Moves the element down by 10px */
left: 20px; /* Moves the element right by 20px */
}

Absolute
The element is positioned relative to its nearest positioned ancestor (an ancestor with a
position of relative, absolute, or fixed). If no such ancestor exists, it uses the initial
containing block (usually the viewport).

.absolute-element {
position: absolute;
top: 50px; /* Distance from the top of the containing block */
left: 100px; /* Distance from the left of the containing block */
}

Fixed
The element is positioned relative to the viewport, which means it stays in the same
place even if the page is scrolled.

.fixed-element {
position: fixed;
top: 0; /* Sticks to the top of the viewport */
right: 0; /* Sticks to the right of the viewport */
}

Sticky
The element is treated as relative until it crosses a specified point (defined by top,
right, bottom, or left), after which it is treated as fixed.

.sticky-element {

Prepared by: Prakash Adhikari


position: sticky;
top: 0; /* The element will stick to the top of the viewport once
scrolled to this point */
}

Float
The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.

The float property can have one of the following values:


● left - The element floats to the left of its container
● right - The element floats to the right of its container
● none - This is the default value. The element does not float (will be displayed just
where it occurs in the text).

Prepared by: Prakash Adhikari

You might also like