Có thể bắt đầu phần dưới cùng sau x lượng pixel không?

Question

Nó sẽ là tuyệt vời nếu có một lựa chọn như vậy, nếu không tôi sẽ phải chồng lên border-bottom với div khác ..

Answer 1

EDIT: Những gì tôi muốn làm những ngày này nếu có thêm một chút về nội dung văn bản của phần tử là sử dụng box-shadow và background-clip. Nếu không, hãy xem giải pháp cuối cùng trong câu trả lời ban đầu của tôi.

div { 
 
    border-bottom: solid .75em transparent; 
 
    margin: 7em auto 1em; 
 
    width: 10em; height: 5em; 
 
    box-shadow: 0 1px 0 -1px black; 
 
    background: dimgrey padding-box; 
 
}

<div></div>

Hãy phân tích ở trên.

Trước hết, border-bottom: solid .75em transparent.

Khu vực border-bottom sẽ là khu vực khoảng cách. Đó là lý do tại sao chúng tôi làm cho nó minh bạch. Thay đổi chiều rộng của đường viền này thay đổi chiều rộng của khoảng trống.

Các quy tắc margin, width và height - không có gì lạ ở đây, chỉ cần định vị và định kích thước phần tử.

Sau đó, chúng tôi có bit này: box-shadow: 0 1px 0 -1px black.

box-shadow không bị mờ này tạo ra đường viền dưới cùng. Giá trị bù trừ y (giá trị thứ hai) tạo ra một "biên giới" 1px. Tăng bù đắp y này làm tăng chiều rộng của "đường viền" của chúng tôi. Đây là một biên giới black, nhưng chúng tôi có thể thay đổi điều đó thành bất kỳ thứ gì khác.

Chúng tôi cũng không muốn hộp bóng của chúng tôi hiển thị ở hai bên, vì vậy chúng tôi cung cấp cho nó sự lây lan -1px.

Cuối cùng, chúng tôi đặt background trên phần tử của chúng tôi. Đó là một dimgrey một, nhưng nó có thể là bất cứ điều gì khác (một gradient, một hình ảnh, bất cứ điều gì). Theo mặc định nền mở rộng theo biên giới là tốt, nhưng chúng tôi không muốn điều đó, vì vậy chúng tôi giới hạn nó vào khu vực của padding-box. Tôi đã sử dụng cách viết tắt ở đây. Tài sản dài hạn là background-clip và bạn có thể tìm thấy giải thích chi tiết về cách hoạt động và các ví dụ khác tương tự như thế này trong this article (tuyên bố từ chối trách nhiệm: tôi đã viết nó).

---

Dưới đây là câu trả lời ban đầu

Bạn có thể sử dụng một yếu tố giả. Vị trí tuyệt đối, chiều rộng 100%, nằm dưới đáy phần tử.

demo

HTML:

<div></div> 

CSS:

div { 
    position: relative; 
    margin: 7em auto 1em; 
    width: 10em; height: 5em; 
    background: dimgrey; 
} 
div:after { 
    position: absolute; 
    bottom: -.8em; 
    width: 100%; 
    border-bottom: solid 1px; 
    content: ''; 
} 

---

Hoặc bạn có thể sử dụng background-clip: content-box và bạn sẽ không cần phải sử dụng một pseudo- ele ment. Nhưng sau đó văn bản của bạn sẽ dính vào các cạnh của nền (trừ khi nó là một văn bản nhỏ và trung tâm).

demo

liên quan CSS:

div { 
    margin: 7em auto 1em; 
    padding: 0 0 .8em; 
    border-bottom: solid 1px; 
    width: 10em; height: 5em; 
    background: dimgrey content-box; 
} 

Answer 2

Bạn có thể sử dụng đệm.

padding: 10px; // push 10px the content 
border: 1px solid #fff; 

Answer 3

Margin và padding là khoảng trắng xung quanh một hình ảnh hoặc một đối tượng.

Như bạn có thể thấy trong hình ảnh, đệm là khoảng cách giữa nội dung và đường viền mà bạn xác định, thay vào đó lề là không gian bên ngoài đường viền, giữa đường viền và các phần tử khác bên cạnh đối tượng này.

Vì vậy, trong trường hợp của bạn, bạn có thể làm một cái gì đó như thế này:

HTML:

<div id="box"></div> 

CSS:

#box{ 
    background: url(image.jpg) no-repeat; 
    height: 100px; 
    width: 100px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
} 

Ở đây bạn có thể tìm thấy một ví dụ đơn giản: http://jsfiddle.net/k7QcN/