Scribd
Upload
4 views

CSS Margins

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Margins

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

CSS Margins

Margins
Margins are used to create space around elements, outside of any defined borders

Margin - Individual Sides


CSS has properties for specifying the margin for each side of an element:
•margin-top
•margin-right
•margin-bottom
•margin-left

• All the margin properties can have the following values:


• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
Margins
• Set different margins for all four sides of a <p> element:
• p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.

• margin: 25px 50px 75px 100px;


• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
• p {
margin: 25px 50px 75px 100px;
}
CSS Padding
• The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
• padding: 25px 50px 75px 100px;
CSS Height, Width and Max-width

he CSS height and width properties are used to set the height and width of an
element.
The CSS max-width property is used to set the maximum width of an element
CSS height and width Values
The height and width properties may have the following values:
•auto - This is default. The browser calculates the height and width
•length - Defines the height/width in px, cm, etc.
•% - Defines the height/width in percent of the containing block
CSS height and width Examples

The max-width property is used to set the maximum width of an


element.
The max-width can be specified in length values, like px, cm, etc.,
or in percent (%) of the containing block, or set to none (this is
default. Means that there is no maximum width).
• div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
CSS Layout - The position

The position Property


The position property specifies the type of positioning method used for an element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
CSS Text
• Text Color
The color property is used to set the color of the text. The color is specified by:
•a color name - like "red"
•a HEX value - like "#ff0000"
•an RGB value - like "rgb(255,0,0)

Text Color and Background Color


In this example, we define both the background-color property and the color property
h1 {
background-color: black;
color: white;
}
CSS Text Alignment

Text Alignment and Text Direction


In this chapter you will learn about the following properties:
•text-align
•text-align-last
•direction
•unicode-bidi
•vertical-align
Text-Align
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
• text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
• div {
text-align: justify;
}
Text Align Last

• The text-align-last property specifies how to align the last line of a text
• p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
Text Direction

• The direction and unicode-bidi properties can be used to change the


text direction of an element:
• p {
direction: rtl ,ltr;
unicode-bidi: bidi-override ;
normal
• Embed
• Isolate
• Bidi-override
• plaintext
Vertical Alignment
• The vertical-align property sets the vertical alignment of an element
• a {
vertical-align: baseline;
}
b {
vertical-align: text-top;
}
c {
vertical-align: text-bottom;
}
d {
vertical-align: sub;
}
e {
vertical-align: super;
}

You might also like