Làm cách nào để thêm đệm vào vùng văn bản mà không làm tăng chiều rộng?

Question

Tôi đã gặp sự cố khi đặt chiều rộng của phần tử văn bản và sử dụng đệm thông qua CSS. Giá trị padding dường như thay đổi chiều rộng của vùng văn bản mà tôi không muốn làm.

Đây là mã HTML của tôi:

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

Và mã CSS của tôi:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

Tuy nhiên, các giá trị đệm không xuất hiện để làm việc như người ta mong đợi. Chiều rộng của vùng văn bản được tăng 350px theo cả hai hướng, thay vì xác định không gian giữa các đường viền của phần tử và nội dung của nó.

Tôi đã xem xét việc định tâm văn bản bằng cách đặt lề ở "0px tự động", nhưng tôi muốn người dùng vẫn có thể cuộn qua vùng văn bản nếu chuột di chuột qua một trong các lề trống. Vì lý do tương tự, tôi không thể thêm một div khác để đóng vai trò như một trình bao bọc, vì người dùng sẽ không thể cuộn dọc theo các vùng trống nhưng chỉ dọc theo vùng văn bản nhỏ hơn.

Ai đó có thể trợ giúp?

Answer 1

Định nghĩa "width" là chiều rộng của nội dung, không bao gồm đường viền, đệm và lề.

May mắn thay, CSS3 có một tài sản mới box-sizing cho phép bạn sửa đổi hành vi này để thay vào đó bao gồm đệm vv trong chiều rộng quy định sử dụng:

box-sizing: border-box; 

Theo liên kết ở trên, hầu hết các trình duyệt hiện đại (bao gồm cả IE> = 8) hỗ trợ thuộc tính này, nhưng chúng có tên khác nhau trong mỗi trình duyệt.

Answer 2

Chiều rộng được chỉ định bởi CSS không bao gồm đệm hoặc đường viền (theo thông số W3C). Tôi đoán một cách để làm điều đó là với một số JavaScript thiết lập chiều rộng của #editor với chiều rộng của #body trừ 700px, nhưng đó là một chút lộn xộn ... Không chắc chắn nếu có một cách CSS để làm những gì bạn muốn ở đây. Tất nhiên, bạn có thể sử dụng ký quỹ rồi đăng ký sự kiện onMouseWheel với #body và làm việc với điều đó ...

Answer 3

Chỉ định chiều rộng và lề/phần đệm trong '%' sẽ giúp. Dưới đây là một ví dụ -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

Một số trình duyệt cho phép bạn nhắm mục tiêu giữ chỗ cho việc thay đổi màu sắc vv, do đó bạn có thể thêm padding là tốt:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}