MELLOMROM

Box Model

PB: Min BOX MODEL laget av DIVs.

Margin

Border

Padding

Content

CSS Box Model

Explanation of the different parts / innenfra og utover boksen:

The box model allows us to add a border around elements, and to define space between elements.

This DIV element will have a total width of 350px:

div {
  background-color: #3CB371;
  width: 300px;
  border: 15px solid #2E8B57;
  padding: 50px;
  margin: 20px;
}

Norske navn: marger, kanter, polstring og innholdet

Utenfra og innover: Marg (margin) + Kantlinje (border) + Polstring (padding) + Innhold

Avstanden mellom og inni elementene kalles margin og padding, og legges i den rekkefølgen.

Margin
- Mellomrommet mellom elementene.
Padding
- Mellomrommet inne i elementene.

Hvordan bruke box-model

https://www.tutora.no/hvordan-bruke-box-model/

De forskjellige nettleserne har også regler for margin og padding på alle overskrifter og avsnitt. For å overstyre de må vi lage våre egne regler.

margin 0

p {
  margin: 0;
}

Hvis vi ser på siden vår i en nettleser nå ser det ut som alle avsnittene bare er en stor blokk med tekst. Endre på regelen for å legge inn litt margin i bunn.

margin på p

p {
  margin: 0 0 15px 0;
}

Margin og padding kan skrives på en linje ved å skrive alle de fire verdiene for alle de fire sidene som i eksempelet over.

margin på h1

h1 {
  font-size: 48px;
  margin: 0;
}

Ved å fjerne margin også på overskriften kan vi få overskriften til å ligge rett over avsnittet.

body

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin: 0;
}

Body-elementet har også margin på seg fra nettleserne. Den fjerner vi også med å sette margin til 0 på body-elementet.

p

p {
  margin: 0 30px 15px 30px;
}

Hvis vi endrer litt på margin-egenskapen til p-elementet så kan vi sette inn litt luft på høyre og venstre side av avsnittene. Hvis du har problemer med å huske hvilke tall som er hvilken side kan du tenke på at «margin and padding are trouble» eller trbl som da står for top, right, bottom, left. I eksempelet over har vi satt 0 på topp, 30px på høyre side, 15px i bunn og 30px på venstre side.

h1

h1 {
  font-size: 48px;
  margin: 0 30px;
}

På h1-regelen kan vi gjøre det på en litt annen måte. Siden vi har samme tall på både topp og bunn trenger vi bare å skrive det en gang. Det samme gjelder for høyre og venstre. Da slår vi sammen topp og bunn og høyre og venstre til to tall istedenfor fire tall.



CSS - marger og padding

(hiof.instructure.com/courses/713/pages/css-marger-og-padding)

Marger

Du kan angi hvor mye luft du skal ha rundt ulike elementer (marger) og hvordan de skal plasseres på nettsiden, gjennom å angi hver side (top, right, bottom, left). Dette skrives som

Bak disse skrives hvordan elementet skal plasseres på siden i antall pixler, f.eks. margin-top:100 px. Du trenger ikke angi alle sidene, men også bruke 

Verdiene som kan brukes på margin-elementer er

Padding

Du har kanskje lagt merke til at noen ganger så har du godt med rom rundt teksten, f.eks. på en button/knapp - mens andre ganger så virker det som om teksten neste ikke får plass på knappen i det hele tatt. 

Dette handler om padding - at man angir hvor mye luft det skal være mellom f.eks. tekst og en ramme (kantlinje).


MARGIN Shorthand

Fra developer.mozilla.org

The 1-value syntax: margin: 1px — The unique value represents all edges
The 2-value syntax: margin: 1px 2px — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
The 3-value syntax: margin: 1px 2px 3px — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge

The 4-value syntax: margin: 1px 2px 3px 4px — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).


MARGINS

Rekkefølgen:

div {
  background-color: LightBlue;
  margin-top: 5px;
  margin-right: 20px;
  margin-bottom: 40px;
  margin-left: 100px;
  border-width: 1px;
  border-style: solid;
  border-color: SteelBlue;
}

Shorthand

div {
  background-color: LightBlue;
  margin: 5px 20px 40px 100px;
  border: 1px solid SteelBlue;
}
<div>
<p>Litt tekst (P) plassert i en DIV-tag.</p>
</div>

4 = (top) (right) (bottom) (left):

margin: 5px 20px 40px 100px;

Litt tekst (P) plassert i en DIV-tag.

3 = (top) (left/right) (bottom):

margin: 5px 20px 40px;

Litt tekst (P) plassert i en DIV-tag.

2 = (top/bottom) (left/right):

margin: 5px 20px;

Litt tekst (P) plassert i en DIV-tag.

1 = (alle 4 sider):

margin: 5px;

Litt tekst (P) plassert i en DIV-tag.

Sentrering med margin: auto;

div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
<div>
This div will be horizontally centered because it has margin: auto;
</div>
This div will be horizontally centered because it has margin: auto;

Arve-egenskaper med inherit

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

This paragraph has an inherited left margin (from the div element).


CSS - Margins (tutorialspoint.com)

The Margin Property

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

We have the following properties to set an element margin (Her lå de faktisk som B, T, L og R, så jeg la dem i riktig rekkefølge).

The Margin Property

The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −

margin:15px;

<p style="margin:15px; border:1px solid black;">
  All four margins will be 15px.
</p>

All four margins will be 15px.

margin:10px 2%;

<p style="margin:10px 2%; border:1px solid black;">
  Top and bottom margin will be 10px, left and right margin will be 2% 
  of the total width of the document.
</p>

Top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.

margin:10px 2% -10px;

<p style="margin:10px 2% -10px; border:1px solid black;">
  Top margin will be 10px, left and right margin will be 2% of the 
  total width of the document, bottom margin will be -10px.
</p>

Top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px.

margin:10px 2% -10px auto;

<p style="margin:10px 2% -10px auto; border:1px solid black;">
  Top margin will be 10px, right margin will be 2% of the total 
  width of the document, bottom margin will be -10px, left margin 
  will be set by the browser.
</p>

Top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser.

The margin-top Property

The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.

margin-top:20px;

<p style="margin-top:20px; border:1px solid black;">
  This is a paragraph with a specified top margin.
</p>

This is a paragraph with a specified top margin

margin-top:5%;

<p style="margin-top: 5%; border:1px solid black;">
  This is another paragraph with a specified top margin in percent.
</p>

This is another paragraph with a specified top margin in percent

The margin-right Property

The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.

margin-right:15px;

<p style = "margin-right:15px; border:1px solid black;">
  This is a paragraph with a specified right margin
</p>

This is a paragraph with a specified right margin

margin-right:5%;

<p style = "margin-right:5%; border:1px solid black;">
  This is another paragraph with a specified right margin in percent
</p>

This is another paragraph with a specified right margin in percent

The margin-bottom Property

The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.

margin-bottom:20px;

<p style="margin-bottom:20px; border:1px solid black;">
  This is a paragraph with a specified bottom margin.
</p>

This is a paragraph with a specified bottom margin.

margin-bottom:5%;

<p style="margin-bottom:5%; border:1px solid black;">
  This is another paragraph with a specified bottom margin in percent.
</p>

This is another paragraph with a specified bottom margin in percent.

The margin-left Property

The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.

margin-left:15px;

<p style="margin-left:15px; border:1px solid black;">
  This is a paragraph with a specified left margin
</p>

This is a paragraph with a specified left margin

margin-left:5%;

<p style="margin-left:5%; border:1px solid black;">
  This is another paragraph with a specified top margin in percent
</p>

This is another paragraph with a specified left margin in percent


Margin Collapsing

Fra developer.mozilla.org

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Margin Collapse

Fra w3schools.com

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

PB: Modifisert. Laget egne presentasjoner, med border.

h1 {
  margin: 0 0 50px 0;
}

Heading 1

h2 {
  margin: 30px 0 0 0;
}

Heading 2

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 30px 0 0 0;
}

Heading 1

Heading 2

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.



PADDING Shorthand

Fra developer.mozilla.org

The 1-value syntax: padding: 1px — The unique value represents all edges
The 2-value syntax: padding: 1px 2px — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
The 3-value syntax: padding: 1px 2px 3px — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge

The 4-value syntax: padding: 1px 2px 3px 4px — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).


PADDINGS

Rekkefølgen:

p {
  background-color: LightBlue;
  padding-top: 5px;
  padding-right: 16px;
  padding-bottom: 20px;
  padding-left: 60px;
}

Shorthand

p {
  background-color: LightBlue;
  padding: 5px 16px 20px 60px;
}
<div>
<p>Innholdet + padding rundt.</p>
</div>

4 = (top) (right) (bottom) (left):

padding: 5px 16px 20px 60px;
Innholdet + padding rundt.

3 = (top) (left/right) (bottom):

padding: 5px 16px 20px;
Innholdet + padding rundt.

2 = (top/bottom) (left/right):

padding: 5px 16px;
Innholdet + padding rundt.

1 = (alle 4 sider):

padding: 5px;
Innholdet + padding rundt.

CSS - Paddings (tutorialspoint.com)

The padding property

The padding property allows you to specify how much space should appear between the content of an element and its border −

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties − (Her lå de faktisk som B, T, L og R, så jeg la dem i riktig rekkefølge).

The padding-top Property

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.

padding-top:15px;

<p style="padding-top:15px; border:1px solid black;">
  This is a paragraph with a specified top padding
</p>

This is a paragraph with a specified top padding

padding-top:5%;

<p style="padding-top:5%; border:1px solid black;">
  This is another paragraph with a specified top padding in percent
</p>

This is another paragraph with a specified top padding in percent

The padding-right Property

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

padding-right:15px;

<p style="padding-right:15px; border:1px solid black;">
  This is a paragraph with a specified right padding
</p>

This is a paragraph with a specified right padding

padding-right:5%;

<p style="padding-right:5%; border:1px solid black;">
  This is another paragraph with a specified right padding in percent
</p>

This is another paragraph with a specified right padding in percent

The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

padding-bottom:15px;

<p style="padding-bottom:15px; border:1px solid black;">
  This is a paragraph with a specified bottom padding
</p>

This is a paragraph with a specified bottom padding

padding-bottom:5%;

<p style="padding-bottom:5%; border:1px solid black;">
  This is another paragraph with a specified bottom padding in percent
</p>

This is another paragraph with a specified bottom padding in percent

The padding-left Property

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

padding-left:15px;

<p style="padding-left:15px; border:1px solid black;">
  This is a paragraph with a specified left padding
</p>

This is a paragraph with a specified left padding

padding-left:5%;

<p style="padding-left:15%; border:1px solid black;">
  This is another paragraph with a specified left padding in percent
</p>

This is another paragraph with a specified left padding in percent


The Padding Property

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px 
      </p> 
      
      <p style = "padding:10px 2%; border:1px solid black;"> 
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document. 
      </p> 
      
      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will 
         be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
</html> 

It will produce the following result −

EX: padding: 15px;

all four paddings will be 15px

EX: padding:10px 2%;

top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document.

EX: padding: 10px 2% 10px;

top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px

EX: padding: 10px 2% 10px 10px;

top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px


CSS padding Property

Note: Padding creates extra space within an element, while margin creates extra space around an element.

If the padding property has four values:

If the padding property has three values:

If the padding property has two values:

If the padding property has one value:



CSS - Dimension

Dimensions

You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this tutorial we will learn how we can change the dimensions of boxes.

We have the following properties that allow you to control the dimensions of a box.

  1. The height property is used to set the height of a box.

  2. The width property is used to set the width of a box.

  3. The line-height property is used to set the height of a line of text.

  4. The max-height property is used to set a maximum height that a box can be.

  5. The min-height property is used to set the minimum height that a box can be.

  6. The max-width property is used to set the maximum width that a box can be.

  7. The min-width property is used to set the minimum width that a box can be.


1. The Height and Width Properties

The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.

<p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high.
</p>

It will produce the following result −

This paragraph is 400pixels wide and 100 pixels high.


2. The line-height Property

The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.

<p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>

It will produce the following result −

This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels. This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.


3. The max-height Property

The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

<p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<img alt="logo" src="/css/images/logo.png" width="195" height="84" />

It will produce the following result −

This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px



logo

4. The min-height Property

The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

<p style="width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/css/images/logo.png" width="95" height="84" />

It will produce the following result −

This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px

logo

5. The max-width Property

The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

<p style="max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />

This will produce following result −

This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px

logo

6. The min-width Property

The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

<p style="min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt="logo" src="/css/images/css.gif" width="95" height="84" />

It will produce the following result −

This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px

logo


The CSS calc() function

https://flaviocopes.com/css-calc/

The calc() function lets you perform basic math operations on values, and it’s especially useful when you need to add or subtract a length value from a percentage.

This is how it works:

div {
 max-width: calc(80% - 100px);
}
tester denne

It returns a length value, so it can be used anywhere you expect a pixel value.

You can perform

One caveat: with addition and subtraction, the space around the operator is mandatory, otherwise it does not work as expected.

Examples:

div {
 max-width: calc(50% / 3);
}
tester denne
div {
 max-width: calc(50% + 3px);
}
tester denne