MELLOMROM

Box Model

PB: Min BOX MODEL laget av DIVs.

CSS Box Model

Explanation of the different parts / innenfra og utover boksen:

• Content - The content of the box, where text and images appear.
• Padding - Clears an area around the content. The padding is transparent.
• Border - A border that goes around the padding and content.
• Margin - Clears an area outside the border. The margin is transparent.

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;
}

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

• margin-top
• margin-right
• margin-bottom
• margin-left

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 

• margin: topp, høyre, bunn, venstre (eks margin: 25 px 50 px 100 px 50 px)
• margin: topp/bunn høyre/venstre (eks margin: 25 px 50 px)
• margin: topp høyre/venstre bunn (eks margin: 25 px 50 px 25 px)
• marging: topp/høyre/venstre/bunn (alle sider har samme verdier)

Verdiene som kan brukes på margin-elementer er

• auto - nettleseren beregner, f.eks. hvis du angir bredde på element vil nettleseren fordele gjenværende plass i bredden som like marger på høyre og venstre side
• length - angir lengde
• % - angir i prosent av bredden av elementet
• inherit - sier at man skal arve verdi fra foreldre-elementet 

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;

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

margin: 5px 20px 40px;

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

margin: 5px 20px;

1 = (alle 4 sider):

margin: 5px;

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>

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>

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 specifies a shorthand property for setting the margin properties in one declaration.

• The margin-top specifies the top margin of an element.

• The margin-right specifies the right margin of an element.

• The margin-bottom specifies the bottom margin of an element.

• The margin-left specifies the left margin of an element.

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>

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>

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>

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>

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>

margin-top:5%;

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

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>

margin-right:5%;

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

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>

margin-bottom:5%;

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

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>

margin-left:5%;

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

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;
}

h2 {
  margin: 30px 0 0 0;
}

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 30px 0 0 0;
}

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;

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

padding: 5px 16px 20px;

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

padding: 5px 16px;

1 = (alle 4 sider):

padding: 5px;

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 specifies the top padding of an element.

• The padding-right specifies the right padding of an element.

• The padding-bottom specifies the bottom padding of an element.

• The padding-left specifies the left padding of an element.

• The padding serves as shorthand for the preceding properties.

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>

padding-top:5%;

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

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>

padding-right:5%;

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

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>

padding-bottom:5%;

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

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>

padding-left:5%;

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

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;

EX: padding:10px 2%;

EX: padding: 10px 2% 10px;

EX: padding: 10px 2% 10px 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:

• padding:10px 5px 15px 20px;
  • top padding is 10px
  • right padding is 5px
  • bottom padding is 15px
  • left padding is 20px

If the padding property has three values:

• padding:10px 5px 15px;
  • top padding is 10px
  • right and left padding are 5px
  • bottom padding is 15px

If the padding property has two values:

• padding:10px 5px;
  • top and bottom padding are 10px
  • right and left padding are 5px

If the padding property has one value:

• padding:10px;
  • all four paddings are 10px

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 −

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 −

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

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

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

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

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);
}

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

You can perform

• additions using +
• subtractions using -
• multiplication using *
• division using /

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);
}

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