如何在網頁文章之間縮進/添加空格？ html

-1

我想增加這些文本框之間的空間，什麼是最好的方法？我嘗試了一些東西，但沒有太多的成功。歡呼聲如何在網頁文章之間縮進/添加空格？ html

<!DOCTYPE html> 
<html> 
<head> 
    <title> Kontakt </title> 
    <link rel="stylesheet" href="index.css" type="text/css" /> 
</head> 
<body> 
    <div class="container">   
    <h1 align="center"> 
    <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a> 
</h1>  

<div class="menu_div"> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="kontakt.html">Kontakt</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropbtn">Bewerber</a> 
    <div class="dropdown-content"> 
    <a href="#">Info</a> 
    <a href="jobs.html">Jobs</a> 
</div> 
</li>  
    <li class="dropdown"><a href="#" class="dropbtn">Kunde</a> 
    <div class="dropdown-content"> 
    <a href="personalverleih.html">Personalverleih</a> 
    <a href="toolrental.html">Werkzeuge Mieten</a> 
    <a href="referenzen.html">Referenzen</a> 
    <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a> 
</li> 
</div> 
    <div class="fadein"> 
    <img src="welder6.png"> 
    <img src="welder1.png"> 
    <img src="welder1.png"> 
</div> 
<header> 
    <h1 style="text-align:right; font-weight: normal;"> zur Stelle. </h1> 
</header> 
    <div class="flex-container"> 

<article class="article"> 
    <a href="upload1.html"><h1>Rohrschlosser/Schweisser</h1></a> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
    with a metropolitan area of over 13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, 
    its history going back to its founding by the Romans, who named it Londinium.</p> 
    <p><strong>Resize this page to see that what happens!</strong></p> 
</article> 
<article class="article"> 
    <h1>Rohrschlosser/Schweisser</h1> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
    with a metropolitan area of over 13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, 
    its history going back to its founding by the Romans, who named it Londinium.</p> 
    <p><strong>Resize this page to see that what happens!</strong></p> 
</article> 

<article class="article"> 
    <h1>Rohrschlosser/Schweisser</h1> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
    with a metropolitan area of over 13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, 
    its history going back to its founding by the Romans, who named it Londinium.</p> 
    <p><strong>Resize this page to see that what happens!</strong></p> 
</article> 

<article class="article"> 
    <h1>Rohrschlosser/Schweisser</h1> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
    with a metropolitan area of over 13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, 
    its history going back to its founding by the Romans, who named it Londinium.</p> 
    <p><strong>Resize this page to see that what happens!</strong></p> 
</article> 

<article class="article"> 
    <h1>Rohrschlosser/Schweisser</h1> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
    with a metropolitan area of over 13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, 
    its history going back to its founding by the Romans, who named it Londinium.</p> 
    <p><strong>Resize this page to see that what happens!</strong></p> 
</article> 
</div> 
</body> 
</html> 



body { font-family: verdana; background:white ; color: black; } 


} 

.menu_div{background-color: #333; width:100%;} 
ul { 
    list-style-type: none; 
    margin: 0 auto; 
    display:table; 
    padding: 0; 
    z-index: 100; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: black; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 100; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

     @keyframes fade { 
     0% { opacity: 0; } 
     11.11% { opacity: 1; } 
     33.33% { opacity: 1; } 
     44.44% { opacity: 0; } 
     100% { opacity: 0; } 
} 

    .fadein { position:absolute; height:500px; width:49px; outline: 1px solid blue; } 
    .fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; } 
    .fadein img:nth-child(1) { animation-delay: 0s; } 
    .fadein img:nth-child(2) { animation-delay: 3s; } 
    .fadein img:nth-child(3) { animation-delay: 6s; } 

.menu_div { 
    position: relative; 
    z-index: 0; 
    height: 2.9em; 
    margin-bottom: -0.4em; 
    margin-top: 0em; 
    z-index:1000; 
    background-color: #333 


} 
.fadein { 
    position: relative; 
    z-index: 3; 
    background: ; 
    width: 100%; 
    left: -0.5px; 
    top: 0em; 


    } 

.fadein img{ 
    margin:0 auto; 
    width: 100%; 
    max-width: 4060px; 
    min-width: 900px; 
    max-height: 400%; 
} 




.tech-slideshow { 
    height: 200px; 
    max-width: 800px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
    transform: translate3d(0, 0, 0); 
} 

.tech-slideshow > div { 
    height: 100px; 
    width: 100px; 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg); 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    transform: translate3d(0, 0, 0); 
} 
.tech-slideshow .mover-1 { 
    animation: moveSlideshow 12s linear infinite; 
} 
.tech-slideshow .mover-2 { 
    opacity: 0; 
    transition: opacity 0.5s ease-out; 
    background-position: 0 -200px; 
    animation: moveSlideshow 15s linear infinite; 
} 
.tech-slideshow:hover .mover-2 { 
    opacity: 1; 
} 

@keyframes moveSlideshow { 
    100% { 
    transform: translateX(-66.6666%); 
    } 
} 


form { 
    background-color: #f7f7f7; 
    border: 2px solid black; 

    /* Just to center the form on the page */ 
    margin: auto; 
    width: auto; 
    height: auto; 

    /* To see the limits of the form */ 
    padding: 10em; 
} 

div + div { 
    margin-top: 0.3em; 
} 

label { 
    /* To make sure that all label have the same size and are properly align */ 
    display: inline-block; 
    width: 130px; 
    text-align: left; 
} 

input, textarea { 
    /* To make sure that all text field have the same font settings 
    By default, textarea are set with a monospace font */ 
    font: 1em verdana; 

    /* To give the same size to all text field */ 
    width: 200px; 

    -moz-box-sizing: border-box; 
     box-sizing: border-box; 

    /* To harmonize the look & feel of text field border */ 
    border: 2px solid ; 
} 

input:focus, textarea:focus { 
    /* To give a little highligh on active elements */ 
    border-color: black; 
} 

textarea { 
    /* To properly align multiline text field with their label */ 
    vertical-align: top 

    /* To give enough room to type some text */ 
    height: 23em; 

    /* To allow users to resize any textarea vertically 
    It works only on Chrome, Firefox and Safari */ 
    resize: vertical; 
} 

.button { 
    /* To position the buttons to the same position of the text fields */ 
    padding-left: 400px; /* same size as the label elements */ 
} 

button { 
    /* This extra magin represent the same space as the space between 
    the labels and their text fields */ 
    margin-left: 2em; 
} 

.container { 
    max-width: 70%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.image-upload > input 
{ 
    display: none; 
} 

.image-upload img 
{ 
    width: 70px; 
    cursor: pointer; 

} 



.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    text-align: center; 
    border: -0.2px solid #CCCCCC; 
} 

.flex-container > * { 
    padding: 150px; 
    -webkit-flex: 1 110%; 
    flex: 1 100%; 
    height: 70px; 
    border: 6px solid #CCCCCC; 
    height: 200px: 
} 

.article { 
    text-align: left; 
    height: 200px; 
} 

header { 
background: white;color:black; 
font-size: 0.9em; 
} 


footer {background: #333;color:white; 
position: absolute; 
bottom: -641px; 
width: 1117px; 

} 

@media all and (min-width: 768px) { 
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;} 
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;} 
    footer {-webkit-order:3;order:3;} 
} 

.swiss { 
position: absolute; 
right: 390px; 
bottom: -170px; 
} 


.indexinfo { 

padding:70px; 
-webkit-flex: 1 100%; 
flex: 1 110%; 
height: 70px; 
border: px solid black; 
height: 200px: 
text: center; 

} 

.sidebar-image-gallery { 

height: 700px; 
width: 1323px; 

} 


    display: block; 
    font-size: 2em; 
    margin-top: 0.67em; 
    margin-bottom: 0.67em; 
    margin-left: 0; 
    margin-right: 0; 
    font-weight: bold; 
}

來源

2016-11-17 A.J.W

只需添加'邊距：20px'。還有什麼問題？ –

感謝穆罕默德，試了一下，但沒有成功，看看爲什麼 –

檢查此[** Fiddle **]（https://jsfiddle.net/xo1uf1ym/1/）。它的工作。 –

面積怎麼樣的「文章」類保證金？

如：

.article { 
    text-align: left; 
    height: 200px; 
    margin-top: 100px; 
}

來源

2016-11-17 10:14:16

已經嘗試過，沒有成功，你認爲它與邊界有關嗎？歡呼 –

你想保持灰色背景完好嗎？因爲保證金爲我工作，但在 –

之間創建一個空白空間現在，我有了兩份同樣的文章lol –

如何在網頁文章之間縮進/添加空格？ html

回答

相關問題