DEV Community

jason ho
jason ho

Posted on

TIL 4

More CSS
Boxes and stuff

Image description

Height and Width:

```p {
height: 80px;
width: 240px;


}

Borders:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xoswk4roij2x6gxu95k.png)

Border Radius:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwxmyu0hhihfhe5he0a4.png)

Padding:
Enter fullscreen mode Exit fullscreen mode

p.content-header {
border: 3px solid coral;
padding: 10px;
}
padding-top
padding-right
padding-bottom
padding-left



Padding short hand:
Enter fullscreen mode Exit fullscreen mode

p.content-header {
padding: 6px 11px 4px 9px;
}



4 values (top->right->bottom->left)
3 values (top->left right->bottom)
2 values (top bottom -> left right)

Margins:
Pretty much the same as padding

Auto (auto adjust margin):
Enter fullscreen mode Exit fullscreen mode

div.headline {
width: 400px;
margin: 0 auto;
}



Minimum and Maximum Height and Width:
Enter fullscreen mode Exit fullscreen mode

p {
min-width: 300px;
max-width: 600px;
min-height: 150px;
max-height: 300px;
}




Overflow:

The overflow property controls what happens to content that spills, or overflows, outside its box. The most commonly used values are:

hidden
scroll
visible

Visibility:

hidden 
visible 
collapse
Enter fullscreen mode Exit fullscreen mode

Top comments (0)