Scribd
Carica
4 visualizzazioni

CSS Box Model

Il documento spiega le proprietà CSS per la formattazione dei bordi, dei margini e del padding negli elementi. Viene descritto l'uso delle proprietà border, margin, padding e box-sizing per aggiungere spaziatura e stili ai bordi degli elementi in HTML.

Caricato da

MER JUNE TV
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
4 visualizzazioni

CSS Box Model

Il documento spiega le proprietà CSS per la formattazione dei bordi, dei margini e del padding negli elementi. Viene descritto l'uso delle proprietà border, margin, padding e box-sizing per aggiungere spaziatura e stili ai bordi degli elementi in HTML.

Caricato da

MER JUNE TV
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 28

Div tag

CSS Box Mode


Responsive Websitel
Div tag

Syntax

<div>...</div

The div tag is used to group HTML elements in a web page


which helps us to make separate sections that have similar
functionality and can be easily styled using Id or class
attributes.
Box Model

img {width: 100%;}


Viewport

the viewport is the visible area of a web page that is


displayed within the browser window.
Responsive Web Design
Responsive Web Design
Responsive Images
Border

Border

{border: solid;} {border-width: 20px;} {border-width: 0px 10px 20px 30px;}


Border

border
the border property adds a border to the element.
Border

border shorthand
border: border-width border-style border-color;
Border

border-width: border-color:
sets the width of the border. sets the color of the border.

The value of the border-width The value of the border-color can be:
can be: px color name, rgb, or hexcode
Border Styles
.solid{
border: 10px solid tomato;
}
.dotted{
border: 10px dotted teal;
}
.dashed{
border: 10px dashed crimson;
}
.double{
border: 10px double seagreen;
}
.groove{
border: 10px groove purple;
}
.ridge{
border: 10px ridge gray;
}
.inset{
border: 10px inset dodgerblue;
}
.outset{
border: 10px outset goldenrod;
}
.radius{
border: 10px solid black;
border-radius: 50px;
}
Border

Note:
To apply border on individual sides you can use the following
properties:
● border-top
● border-right
● border-bottom
● border-left

And to apply border-radius on an element:


● border-radius

border-radius can use px or %


Border

How to add space between the text and the border?


Padding

padding: 50px;
Padding

padding
the padding property sets the padding for an element.

Note:
Padding values are applied clockwise
Padding

1 - value padding: 2 - value padding:


-the value applies the ● first value = top and bottom
padding to all four sides. side
● second value = right and left
Example: side
padding: 10px;

Example:
padding: 10px 20px;
Padding

3 - value padding: 4 - value padding:


● first value = top side ● first value = top side
● second value = right and ● second value = right side
left side ● third value = bottom side
● third value = bottom side ● fourth value = left side

Example:
padding: 10px 20px 30px 40px;
Example:
padding: 10px 20px 30px;
Padding

Note:
padding property is a shorthand.

To apply padding on individual sides you can use the following


properties:

● padding-top
● padding-right
● padding-bottom
● padding-left
Margin

Space
Content 1 Content 2

{margin : 20px;}
Margin

margin
the margin property sets the margin for an element.

Note:
Margin values are applied clockwise
Margin

1 - value margin: 2 - value margin:


-the value applies the margin ●first value = top and bottom
to all four sides. side
● second value = right and left
Example: side
margin: 10px;

Example:
margin: 10px 20px;
Margin

3 - value margin: 4 - value margin:


● first value = top side ● first value = top side
● second value = right and ● second value = right side
left side ● third value = bottom side
● third value = bottom side ● fourth value = left side

Example:
margin: 10px 20px 30px 40px;
Example:
margin: 10px 20px 30px;
Margin

Note:
margin property is a shorthand.

To apply margin on individual sides you can use the following


properties:

● margin-top
● margin-right
● margin-bottom
● margin-left
Box Model
Box Model
Box Sizing

By default, the width and height of an element is calculated like this:


width + padding + border = actual width of an element
height + padding + border = actual height of an element

The box-sizing property allows us to include the padding


and border in an element's total width and height.
Thank You!

Potrebbero piacerti anche