如何將邊框貼近文本和圖像，並使CSS在背景灰色？

這是我做了什麼：如何將邊框貼近文本和圖像，並使CSS在背景灰色？

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>

如何我現在可以左，右移動邊界接近的文字和圖像，然後使左，右邊界之間的灰色背景？

來源

2016-04-25 NikolaTECH

你真的應該讓自己一些基本的CSS教程，這是基本的東西 – Aides

@Aides我完成了CodeAcademy課程，並在做了幾個項目短跑，但沒有了解這一點。如果它是基本的，你現在可能是答案......？ – NikolaTECH

在Web中，HTML用於設計的結構和CSS。當你做'body {// stuff}'時，你改變了你的身體的風格（基本上是整個窗口），而不是你的文本和圖像的邊界。正如很多人在答案中所說的那樣，你可以將元素封裝在一個'div'中（就像你已經做過的那樣） - 一個'div'基本上是一個空的容器 - 然後用CSS來設置容器的樣式。永遠記住，你直接將CSS應用於一些HTML元素！ – Aides

邊框周圍放置一個元素的尺寸，在你的情況下，body標籤覆蓋了整個窗口。如果你想讓它們靠近你可以添加邊框到另一個元素上，而不是使用寬度。

我看你已經有一個容器（.container），所以你可以使用它並應用邊框和背景它同時加入例如width: 60%然後margin: 0 auto水平居中它。

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>

來源

2016-04-25 12:19:45 Aziz

包裝你的內容在一個div，然後應用邊框和紅色背景，新的div和灰色的背景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; 
}

例：https://jsfiddle.net/parj6ep1/

來源

2016-04-25 12:18:28

使用您的容器div來實現你想要的：

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>

來源

2016-04-25 12:19:04 beerwin

在編輯之前從原作中取得代碼。請在拍攝前仔細閱讀。 – beerwin

你需要設置在.container而不是身體border和background。

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">

來源

2016-04-25 12:20:32 Roy

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

來源

2016-04-25 12:37:40

如何將邊框貼近文本和圖像，並使CSS在背景灰色？

回答

相關問題