Không, lề tự động sẽ không thay đổi kích thước của các yếu tố đoạn. Nó chỉ đơn giản là cố gắng tự động xác định kích thước lề thích hợp trên các mặt có kích thước tự động của phần tử. Về cơ bản, nếu bạn muốn đoạn văn nhỏ hơn div chứa nó, bạn có thể đặt chiều rộng tĩnh của đoạn văn là chiều rộng cụ thể hoặc phần trăm chiều rộng bên trong của phần tử gốc. Một tùy chọn khác nếu bạn không muốn thực hiện bất kỳ kích thước tĩnh nào của đoạn văn sẽ là đặt padding trên phần tử cha hoặc đặt lề tĩnh trên đoạn (s).
div.paragraph-container {
padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */
}
Điều này sẽ làm cho tất cả các đoạn văn trung tâm bên trong div và nhỏ hơn 40px giả định các đoạn không có lề.
div.paragraph-container p {
margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */
}
Nếu bạn muốn biên giới để được chính xác độ rộng của văn bản thì:
div.paragraph-container p {
border-bottom: 1px dotted black;
padding: 0px 0px 5px 0px;
margin: 10px 20px;
}
div.paragraph-container {
padding: 0px;
}
Giả sử các văn bản lấp đầy các yếu tố đoạn thì đây sẽ làm việc. Nếu bạn có 2 từ trong đoạn văn thì nó sẽ không chỉ rộng bằng văn bản. Cách duy nhất để kéo điều đó sẽ là với một phần tử nội tuyến như một khoảng hoặc một phần tử đã được đặt thành display: inline;, nhưng các phần tử nội tuyến sẽ bị lộn xộn song song trừ khi bạn đặt một phần tử khối giữa chúng.
Chỉ là những gì tôi đang tìm kiếm, cảm ơn. – user2020058
display: table hiệu quả hơn, và không cần phải đặt chúng làm inline-box và sau đó bọc chúng vào div –
Tôi không biết về 'display: table' và sizing. Trước đây tôi đã nhắm mục tiêu IE7, vì vậy tôi là một chút không biết gì về nó. Cảm ơn! – SlightlyCuban