04. randen en spaties

terminologie

border

Elke kader heeft een border, een rand, zichtbaar of onzichtbaar (0px breed)

margin

De margin bevindt zich langs de buitenkant van de rand van de kader. De breedte van de margin zorgt voor een witruimte tussen bijvoorbeeld twee kaders onderling.

padding

padding is de ruimte binnenin het kader, te tellen vanaf de kant tot waar de inhoud binnenin het kader begint. Het toevoegen van witruimte binnenin het kader verhoogt de leesbaarheid van een tekst binnenin.

intro in CSS basic box model

meer info: CSS basic box model

CSS & randen

randen: width & height

div.box {
    
height: 300px;

    width: 300px;

    background-color: #bbbbaa;
    border: 1px solid blue;}
p {

    height: 75%;

    width: 75%;

    background-color: #0088dd;
    border: 1px solid red;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_width try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_width2

randen: min-width & max-width

td.description {

    min-width: 450px;

    max-width: 650px;

    text-align: left;

    padding: 5px;

    margin: 0px;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-width

randen: min-height & max-height

h2, p {

    width: 400px;

    font-size: 90%;

    line-height: 1.2em;}

h2 {

    color: #0088dd;

    border-bottom: 1px solid #0088dd;}

p {
    
min-height: 10px;

    max-height: 30px;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-height

randen: overflow

p.one {
    
overflow: hidden;}

p.two {

    overflow: scroll;}

overflow: visible | hidden | scroll | auto

try it yourself (visible): https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_visible try it yourself (hidden): https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_hidden try it yourself (scroll): https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_scroll try it yourself (auto): https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_auto

border-width

p.one {

    border-width: 2px;}

p.two {

    border-width: thick;}

p.three {

    border-width: 1px 4px 12px 4px;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

border-style

p.one {
    border-style: solid;}

p.two {
    border-style: dotted;}

p.three {
    border-style: dashed;}
p.four {
    border-style: double;}

p.five {
    border-style: groove;}

p.six {
    border-style: ridge;}

p.seven {
    border-style: inset;}

p.eight {
    border-style: outset;}

border-style: dotted | dashed | solid (=standaardwaarde) | double | groove | ridge | inset | outset | none | hidden;

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-style

border-color

p.one {

    border-color: #0088dd;}

p.two {

    border-color: #bbbbaa #111111 #ee3e80 #0088dd;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1

border

p {

    width: 250px;

    border: 3px dotted #0088dd;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_border

padding

p {

    width: 275px;

    border: 2px solid #0088dd;}
p.example {

    padding: 10px;}

padding: padding-top | padding-right | padding-bottom | padding-left;

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_intro try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides

margin

p {
    
width: 200px;

    border: 2px solid #0088dd;

    padding: 10px;}
p.example {
margin: 20px;}

margin: margin-top | margin-right | margin-bottom | margin-left;

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_intro try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides

border-image

p.one {

    border-image: url("images/dots.gif")
11 11 11 11 stretch;}

p.two {

    border-image: url("images/dots.gif")
11 11 11 11 round;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image

box-shadow

.one {

    box-shadow: -5px -5px #777777;}

p.two {

    box-shadow: 5px 5px 5px #777777;}

p.three {

    box-shadow: 5px 5px 5px 5px #777777;}

p.four {

    box-shadow: 0 0 10px #777777;}

p.five {

    box-shadow: inset 0 0 10px #777777;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-shadow3

border-radius

p {

    border: 5px solid #cccccc;

    padding: 20px;

    width: 275px;

    text-align: center;

    border-radius: 10px;}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_border_round try it yourself: https://www.w3schools.com/css/css3_borders.asp