2012-04-06 40 views
32

Tôi đã tìm kiếm câu trả lời nhưng không thể tìm thấy câu trả lời ở bất cứ đâu. Câu hỏi của tôi khá đơn giản: tôi có màu nền của cơ thể, sau đó là một lề lớn, và bây giờ tôi muốn một màu nền khác nhau bên trong lề.CSS: màu nền chỉ bên trong lề

Làm cách nào để làm điều đó với CSS?

+1

bạn ** chỉ ** có nền _inside các margin_. Mô hình hộp: http://www.w3.org/TR/CSS2/box.html – c69

+2

nếu bạn sử dụng phần đệm thay vì lề, sau đó nó sẽ có màu nền bạn chọn cho phần tử – bevacqua

Trả lời

36

Nếu biên độ của bạn được đặt trên cơ thể, sau đó thiết lập màu nền của thẻ html nên màu sắc khu vực lề

html { background-color: black; } 
body { margin:50px; background-color: white; } 

http://jsfiddle.net/m3zzb/

gợi ý

Hoặc như dmackerman, đặt lề là 0, nhưng đường viền có kích thước bạn muốn lề là và đặt đường viền màu

+0

Cảm ơn, đã hoạt động hoàn hảo – stackunderflow

+0

hoặc đặt 'div' #main_container bên trong' body' để làm điều tương tự –

+0

Nếu màu nền của bạn trên thẻ html là bất kỳ màu nào hơn màu trắng, khi trang tải lần đầu tiên, màu sẽ mất toàn bộ trang trong một giây, trước khi màu sắc của cơ thể đá vào, vì vậy nó có vẻ lạ. – frosty

0

Điều đó không thể thực hiện được với Mô hình hộp. Tuy nhiên, bạn có thể sử dụng giải pháp thay thế với hình ảnh đường viền của css3 hoặc màu đường viền trong css chung.

Tuy nhiên, không chắc liệu bạn có gặp sự cố khi đặt lại hay không. Một số trình duyệt cũng đặt lề thành html. Xem Eric Meyers Đặt lại CSS để biết thêm!

html{margin:0;padding:0;} 
10

Thay vì sử dụng lề, bạn có thể sử dụng đường viền không? Tuy nhiên, bạn nên làm điều này với <div>.

Một cái gì đó như thế này? enter image description here

http://jsfiddle.net/GBTHv/

+0

Xin chào, tôi đã thực hiện một cái gì đó tương tự, nhưng màu nền bên trong biên giới chỉ mở rộng đến dưới cùng của văn bản bên trong lề. Tôi cần nó ở bên trong toàn bộ khu vực lề .. nếu điều đó có ý nghĩa. – stackunderflow

+0

@ user1318194 - Tôi nghĩ rằng bạn đang bối rối bởi những gì có nghĩa là margin. Lề là khu vực xung quanh phần tử, vì vậy đường viền như trên chính xác là lề là gì. –

+0

Vâng, nhưng với lề bạn có thể đặt nó theo tỷ lệ phần trăm - biên giới bạn không thể. Vì vậy, nếu bạn muốn có lề 1% ở bên trái và bên phải, bạn sẽ không thể thực hiện điều đó với đường viền. – frosty

3

tôi cần một cái gì đó tương tự, và đã đưa ra bằng cách sử dụng: trước (hoặc: sau) pseudoclasses:

#mydiv { 
    background-color: #fbb; 
    margin-top: 100px; 
    position: relative; 
} 
#mydiv:before { 
    content: ""; 
    background-color: #bfb; 
    top: -100px; 
    height: 100px; 
    width: 100%; 
    position: absolute; 
} 

JSFiddle

Các vấn đề liên quan