Bread making can be intimidating. The fact is that it's a simple craft. No fancy machinery or secret recipe. There is some basic science behind yeast but it's difficult to mess up. Bread making is far more forgiving than most people realize. Ingredients are simple. The basics are the same across continents...water, flour, yeast. Fat - 1 tbsp plus... adding some vegetable oil is an easy way to make breadmaking more forgiving. Simply pour into the mixing bowl. If it's your first bread and you need a measurement use 2tbsps (1oz, 15mils) Liquid - 3 cups plus... again, the exact amount doesn't matter. I try to match water to milk at a 50/50 ratio. The milk serves as a preservative to double the shelf life from 3 to 6 days. You could just as easily use all water. Use at least 3 cups to make enough for a couple loaves. Flour - say 6 cups plus... honestly I couldn't tell you. When it comes to adding the dry you are trying to create a dough that has the right consistency. All you'll need to do is add more flour till the dough is right. Salt - a couple shakes... For your first bread just add the amount you would add to cookies or a cake. Something like a 1/2 teaspoon is fine. They say salt slows the yeast... you'll never notice.
``` **CSS** ```css body { font-family: Futura; } h1 { color: #B33C86; border: 10px solid #B33C86; } p { color: #190E4F; border: 5px solid #190E4F; } ``` **Setting padding in pixels** **Adding padding in pixels** is a great way to set padding that **never changes**. Regardless of the text size the user has set, the padding will always be shown at the same size. Select your element, declare a padding property, and set it to a numerical value in pixels: ```css h1 { padding: 10px; } p { padding: 10px; } ``` **Setting padding in em/rem** You can also set padding as an **em or rem value**. The padding value will then be **relativeto the element's text size**. If an h1 has a font-size of 32px, 1em of padding would be 32px. If a p has a font-size of 16px, 1em of padding would be 16px. Setting padding with a relative unit like em or rem means that if a user has a default font size set in their browser, your design will be relative to that font size. This could allow for more design consistency. ```css h1 { padding: 0.5em; } p { padding: 1em; } ``` **Setting padding via percentages** You can also set padding as a **percentage value**. The percentage is **relative to the widthof the containing element**. This is a bit abstract, so stick with me. Take the following example of a paragraph within the body of your page: ```markupMy paragraph
``` Say that: * the body of the page is 850px wide. * the paragraph inside the body is 300px wide. If you set padding: 10% on the paragraph element, the paragraph's padding will be 85px (10% of 850px); not 30px (10% of 300px). Padding percentages are not relative to the width of the element itself; they're relative to the width of its *containing element*. To calculate your ideal padding value as a percentage, here's some easy math: **padding as percentage = desired padding in pixels / width of containing element \* 100** **In the** previously example, a body contains the heading and paragraph. Because the body is 500px wide, the h1's padding (5%) will be 25px. The paragraph's padding (3%) will be 15px. ```css h1 { padding: 5%; } p { padding: 3%; } ``` **Setting multiple padding values** You'll often want to set one vertical padding value and another horizontal padding value. Let's take the case of buttons; it's a little too intense to have 30px of padding on every side of a button (top, right, bottom, and left): You can set top, right, bottom, and left padding values in that order: ```css p { padding: 5px 30px 5px 30px; } ``` :octagonal\_sign: Remember the acronym **TRBL (top, right, bottom, left)** if you have a hard time remembering the value order. If the **top/bottom** values are the same, and the **left/right** values are the same, you can also just set two values: one for the top/bottom padding and another for left/right padding. ```css p { padding: 5px 30px; } ``` ## How to add space between margins ?:thinking: **Margin** is the CSS property that controls spacing between elements. In this diagram, see how it relates to the other layout elements you've seen so far:  An element has padding around it, which is then surrounded by a border, which then has margins outside of it that determine the space between this element and its neighbor(s). ## How to set margins Margins are similar to padding in that they can be set as: * **pixels** * **em/rem values** * **percentages that are relative to the width of the containing block.** Margins also can have a value called `auto` that is useful for centering content. We'll see it at the end of the chapter. Let's start with checking out an example using a paragraph and some images: Here's the HTML and CSS for the example below: **HTML** ```markupBest practices think tank social impact agile mobilize. Relief replicable citizen-centered; the resistance inspire.
```
**CSS**
```css
body {
width: 700px;
text-align: center;
}
p {
font-family: 'Minion Pro';
background-color: black;
color: white;
padding: 10px;
}
img {
width: 150px;
border: 10px solid black;
}
```
Now that you've seen the HTML and CSS for our example, let's go ahead and set some margins!
## **Setting margins via pixels**
Adding margins in **pixels** is a great way to set margins that **never change**, regardless of the size of the element or the text size involved.
Let''s select the image element, declare the `margin` property, and set it to 20 pixels:
```css
img {
margin: 20px;
}
```
By specifying *one* single value, you set the **top, bottom, right,** and **left** margins all to the same amount. Now, 20px of margin has been added to the top, left, bottom, and right of each image element. This means that there's more space between:
* the paragraph and the images, which is a result of the image's **top** margin value
* the images themselves, which is a result of the image's **left** and **right** margin values
**Setting margins in em/rem**
You can also set margins using **em or rem values.** The margin value will then be **relative to the element's text size**. If an h1 has a font-size of 32px, a 1em margin would be 32px. If a p has a font-size of 16px, a 1em margin would be 16px.
Setting margin with a relative unit like em or rem means that if a user has a default font size set in their browser, your design will be relative to that font size. This could allow for more design consistency.My paragraph
``` Let's say that: * the body of the page is 850px wide. * the paragraph inside the body is 300px wide. If you set margin: **10%** on the paragraph element, the paragraph's margin will be 85px (10% of 850px); not 30px (10% of 300px). **Margin percentages are not relative to the width of the element itself; they're relative to the width of its containing element.** To calculate your ideal margin value as a percentage, here's some easy math: :point\_down: **margin value as percentage = desired margin in pixels / width of containing element \* 100** ```css img { margin: 1%: } ``` ## **Setting multiple margin values** You'll sometimes want to set top/bottom margins that are different than the left/right margins. You can therefore set top, right, bottom, and left margin values in that order: ```css img { margin: 0px 30px 0px 30px; ``` If your top/bottom values are the same, and your left/right values are the same, you can also just set two values: one for the top/bottom margins and another for left/right margins. ```css img { margin: 0px 30px; } ``` Why is there still some space between the paragraph and the images in the example above, even though the margin is 0? Good question. **Default spacing** between elements can be tricky to control. That space is the paragraph's default margin that you didn't specify; paragraphs have 16px of margin around them by default. In order to get rid of that space, you'd have to work on the paragraph's margins or set a negative top margin value for the images (yes, negative values are possible!): ```css img { margin: -16px 30px 0px 30px; } ``` **Collapsing margins** Margins exhibit one unusual feature: **vertical margins collapse.** Let's say you have the following elements stacked on top of each other: * one element that has a bottom margin of 30px * one element that has a top margin of 20px The vertical margin between them *seems* like it would be 50px. After all, 20 + 30 = 50. In reality, the vertical margin between them will be 30px. When there are two different vertical margin values touching each other, only *the largest of the two* will be kept. This applies to **block elements**. **HTML** ```markupMake the dough.First, lightly oil a 1kg loaf tin and set aside. In a large bowl or mixer, combine 500g strong white bread flour, 1½ tsp fine salt and 1 tsp golden caster sugar and mix well. Add 7g fast action yeast and mix again. Gradually stir in 300ml warm water until you have a dough that is tacky, rather than sticky
Knead the dough On a lightly floured surface, knead by hand for 15 minutes or 7-10 minutes in an electric mixer, until the dough is smooth and elastic. Kneading is crucial; it allows the gluten in the flour to get to work, becoming more elastic and helping the bread to rise. Form into a smooth ball. Lightly oil a clean bowl, put the dough into it, then cover with cling film or a tea towel and leave to rest in a warm place for 2 hours or until the dough has doubled in size. Proving allows tiny air bubbles to form, which strengthen the structure of the bread, making the dough extra light and much bigger.
``` **CSS** ```css one { margin-bottom: 30px; } #two { margin-top: 20px; } ```