Wie werden Ränder näher an den Text und das Bild gesetzt und der Hintergrund in CSS grau hinterlegt?

Question

Dies ist, was ich getan habe:

body { 
 
    background-color: #d92626; 
 
    color: white; 
 
} 
 
body { 
 
    border-left: 5px solid black; 
 
    border-right: 5px solid black; 
 
    padding: 50px 50px; 
 
} 
 
.test { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="container"> 
 
    <h1 align="center"> 
 
     My text 
 
    </h1> 
 
    <h2 align="center"> 
 
     MORE MORE MORE<br><br><br> 
 
    </h2> 
 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"> 
 
</div>

Wie kann ich nun auf den Text und Bild links und rechts Grenze näher verschieben, und dann den Hintergrund zwischen linkem und rechtem Rand grau machen ?

Answer 1

Grenzen gesetzt sind um ein Dimension des Elements, in Ihrem Fall der body Tag deckt das gesamte Fenster. Wenn Sie möchten, dass sie näher sind, können Sie Grenzen zu einem anderen Element als Körper hinzufügen und es mit weniger Breite machen.

ich Sie schon sehen, haben einen Behälter (.container), so können Sie es verwenden und die Grenzen und Hintergrund für sie gelten, während zum Beispiel das Hinzufügen width: 60% und dann margin: 0 auto es horizontal zu zentrieren.

body { 
 
    background-color: #d92626; 
 
    color: white; 
 
} 
 

 
.container { 
 
    border-left: 5px solid black; 
 
    border-right: 5px solid black; 
 
    padding: 50px 50px; 
 
    width:60%; 
 
    margin:0 auto; 
 
    background: gray; 
 
} 
 

 
.test { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="container"> 
 
    <h1 align="center"> 
 
    My text 
 
    </h1> 
 
    <h2 align="center"> 
 
    MORE MORE MORE<br><br><br> 
 
    </h2> 
 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"> 
 
</div>

Answer 2

Wickeln Sie Ihre Inhalte in einem div und dann gilt Grenze und roten Hintergrund zu neuen div und grauen Hintergrund body

HTML

<div class="container"> 
    <div class="wrapper"> 
    <h1 align="center"> 
     My text 
    </h1> 
    <h2 align="center"> 
     MORE MORE MORE<br><br><br> 
    </h2> 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"> 
    </div> 
</div> 

CSS

body { 
    background-color: #ccc; 
    color: white; 
} 

.wrapper { 
    border-left: 5px solid black; 
    border-right: 5px solid black; 
    margin: 50px 50px; 
    background: #d92626; 
} 

.test { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Beispiel : https://jsfiddle.net/parj6ep1/

Answer 3

Ihre div-Container können Sie erreichen, was Sie wollen:

body { 
 
    background-color: #d92626; 
 
    color: white; 
 
} 
 

 

 
div.container { 
 
    margin: 0 50px; 
 
    background-color: #cccccc; 
 
    border-left: 5px solid black; 
 
    border-right: 5px solid black; 
 
    color: #000000; 
 
} 
 

 
.test { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="container"> 
 
    <h1 align="center"> 
 
    My text 
 
    </h1> 
 
    <h2 align="center"> 
 
    MORE MORE MORE<br><br><br> 
 
    </h2> 
 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"> 
 
</div>

Answer 4

Sie benötigen die border und background im .container anstelle des Körpers einzustellen.

DEMO:

body { 
 

 
    background-color: #d92626; 
 

 
    color: white; 
 

 
} 
 

 
body { 
 

 
    padding: 50px 50px; 
 

 
} 
 

 
.test { 
 

 
    display: block; 
 

 
    margin-left: auto; 
 

 
    margin-right: auto; 
 

 
} 
 

 
.container{ 
 
    background:gray; 
 

 
    border-left: 5px solid black; 
 

 
    border-right: 5px solid black; 
 
    }

<div class="container"> 
 
    <h1 align="center"> 
 
    My text 
 
</h1> 
 
    <h2 align="center"> 
 
    MORE MORE MORE<br><br><br> 
 
</h2> 
 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">

Answer 5

<style> 
body { 
    background-color: #d92626; 
    color: white; 
} 
.test1{ 
    border-left: 5px solid black; 
    border-right: 5px solid black; 
    width:400px; 
    margin: 0 auto; 
    background: gray; 
} 
.test { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
</style> 
<body> 
<div class="container"> 
<div class="test1"> 
    <h1 align="center"> 
     My text 
    </h1> 
    <h2 align="center"> 
     MORE MORE MORE<br><br><br> 
    </h2> 
    <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"> 
    </div> 
</div> 
</body>