/* Inlineelement */
div,
span {
margin: 30px;
}
span {
outline: firebrick dotted medium;
background-color: antiquewhite;
}
span.mitDisplayBlock {
background: #a2a2a2;
display: block;
width: 200px;
height: 200px;
}
span.beispielMargin {
margin: 20px;
}
span.beispielMarginDisplayInlineBlock {
display: inline-block;
}
span.beispielMarginDisplayInline {
display: inline;
}
span.beispielMarginDisplayBlock {
display: block;
}
/* Blockelement */
div {
outline: orange dotted medium;
background-color: deepskyblue;
}
.paddingDiv {
padding: 20px;
background-color: blanchedalmond;
}
.marginDivWrapper {
background-color: aliceblue;
}
.marginDiv {
margin: 20px;
background-color: blanchedalmond;
}
</style>
<style>
/* Nur für das w3school Bild */
#w3_DIV_1 {
bottom: 0px;
box-sizing: border-box;
height: 391px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 913.984px;
perspective-origin: 456.984px 195.5px;
transform-origin: 456.984px 195.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
transition: all 0.25s ease-in-out 0s;
}
/*#w3_DIV_1*/
#w3_DIV_1:before {
bottom: 349.047px;
box-sizing: border-box;
content: '"Margin"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 6.95312px;
width: 909.984px;
perspective-origin: 454.984px 15.5px;
transform-origin: 454.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_1:before*/
#w3_DIV_2 {
bottom: 0px;
box-sizing: border-box;
color: black;
height: 297px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
top: 0px;
width: 819.984px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 409.984px 148.5px;
transform-origin: 409.984px 148.5px;
caret-color: rgb(255, 255, 255);
background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 45px;
}
/*#w3_DIV_2*/
#w3_DIV_2:before {
bottom: 258.578px;
box-sizing: border-box;
content: '"Border"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 7.42188px;
width: 819.984px;
perspective-origin: 409.984px 15.5px;
transform-origin: 409.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_2:before*/
#w3_DIV_3 {
bottom: 0px;
box-sizing: border-box;
height: 207px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 729.984px;
perspective-origin: 364.984px 103.5px;
transform-origin: 364.984px 103.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
}
/*#w3_DIV_3*/
#w3_DIV_3:before {
bottom: 168.344px;
box-sizing: border-box;
content: '"Padding"';
display: block;
height: 31px;
left: 3.64062px;
position: absolute;
right: -3.64062px;
text-align: center;
text-size-adjust: 100%;
top: 7.65625px;
width: 729.984px;
perspective-origin: 364.984px 15.5px;
transform-origin: 364.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_3:before*/
#w3_DIV_4 {
bottom: 0px;
box-sizing: border-box;
height: 117px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 639.984px;
perspective-origin: 319.984px 58.5px;
transform-origin: 319.984px 58.5px;
background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 20px;
}
/*#w3_DIV_4*/
#w3_DIV_4:before {
box-sizing: border-box;
content: '"Content"';
display: block;
height: 73px;
text-align: center;
text-size-adjust: 100%;
width: 595.984px;
perspective-origin: 297.984px 36.5px;
transform-origin: 297.984px 36.5px;
font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
}
/*#w3_DIV_4:before*/
<h1> The Box model - content, padding, border, margin</h1>
<h2> Inline element - span</h2>
<span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>
<span class="beispielMargin">
<b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>
<span class="beispielMarginDisplayInlineBlock">
<b>Solution</b> Only through
<b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
behaves now like a block element to the outside, but like an inline element inside</span>
<span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>
<span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>
<span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>
<span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
a "div" block element. </span>
<h2>Inline-Element - Div</h2>
<div> A div automatically takes "display: block." </ div>
<div class = "paddingDiv"> Padding is for padding </ div>
<div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
of the outer element "marginDivWrapper". Here 20px;)
<div class = "marginDiv"> margin is for the margins </ div>
And there, too, 20px;
</div>
<h2>w3school sample image </h2>
source:
<a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
<div id="w3_DIV_1">
<div id="w3_DIV_2">
<div id="w3_DIV_3">
<div id="w3_DIV_4">
</div>
</div>
</div>
</div>