Hướng dẫn how do you control margins in html? - làm thế nào để bạn kiểm soát lợi nhuận trong html?
Lợi nhuận CSSMarginsLợi nhuận được sử dụng để tạo không gian xung quanh các yếu tố, bên ngoài bất kỳ biên giới được xác định nào. Show
Yếu tố này có biên độ 70px. Hãy tự mình thử » Lợi nhuận CSSCác thuộc tính CSS Với CSS, bạn có toàn quyền kiểm soát lề. Có các thuộc tính để đặt lề cho mỗi bên của một phần tử (trên cùng, phải, dưới cùng và bên trái). Lề - các mặt riêng lẻCSS có các thuộc tính để chỉ định lề cho mỗi bên của một phần tử:
Tất cả các thuộc tính ký quỹ có thể có các giá trị sau:
Mẹo: Giá trị âm được cho phép. Negative values are allowed. Thí dụĐặt tỷ suất lợi nhuận khác nhau cho cả bốn mặt của một yếu tố: p {& nbsp; & nbsp; Margin-Top: 100px; & nbsp; & nbsp; Biên độ lợi nhuận: 100px; & nbsp; & nbsp; lề bên lề: 150px; & nbsp; & nbsp; lề-bên trái: 80px;} Hãy tự mình thử » Các thuộc tính CSS |
Thuộc tính | Vì vậy, đây là cách nó hoạt động: |
|---|---|
Nếu thuộc tính | Biên độ: 25px 50px 75px 100px; |
| Biên độ cao nhất là 25px | Biên độ phải là 50px |
| lề dưới là 75px | Biên độ trái là 100px |
| Sử dụng thuộc tính tốc ký lề với bốn giá trị: | p {& nbsp; & nbsp; lề: 25px 50px 75px 100px;} |
Nếu thuộc tính | Biên độ: 25px 50px 75px; |
Giới thiệu
Trong hướng dẫn này, bạn sẽ tìm hiểu về mô hình hộp CSS, một mô hình được sử dụng để chỉ nội dung, đệm, đường viền và lề của một phần tử HTML. Hiểu mô hình hộp CSS rất hữu ích để điều chỉnh kích thước của bất kỳ phần nào trong phần tử HTML này và hiểu được kích thước và vị trí của các yếu tố được xác định như thế nào. Hướng dẫn này sẽ bắt đầu bằng cách giải thích từng hộp của mô hình hộp CSS và sau đó chuyển sang một bài tập thực tế để điều chỉnh các giá trị của chúng bằng các quy tắc kiểu CSS.
Điều kiện tiên quyết
Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.
Mô hình hộp CSS
Một phần tử HTML có thể được hiểu là một loạt bốn hộp chồng chéo:
- Hộp nội dung là hộp bên trong nơi đặt nội dung văn bản hoặc hình ảnh. Theo mặc định, kích thước của nó thường được đặt theo kích thước của nội dung mà nó chứa. Nó cũng là hộp duy nhất trong mô hình hộp có giá trị thường không phải là 0 theo mặc định (nếu nó chứa nội dung); Ngược lại, phần đệm, đường viền và lề của một phần tử mặc định về 0 đối với nhiều phần tử HTML (như
5,.yellow-div { background-color:yellow; width: 500px; }
6 và.yellow-div { background-color:yellow; width: 500px; }
7) trừ khi bạn chỉ định khác. Khi bạn đặt giá trị cho chiều rộng và chiều cao của một phần tử, bạn thường thay đổi chiều rộng và chiều cao của hộp nội dung..yellow-div { background-color:yellow; width: 500px; } - Hộp đệm là hộp chồng chéo thứ hai, bao gồm một không gian trong suốt bao quanh hộp nội dung. Theo mặc định, phần đệm của nhiều phần tử HTML được đặt thành 0. Tăng kích thước của phần đệm phần tử làm tăng khoảng cách giữa hộp nội dung và hộp viền.
- Hộp viền là hộp chồng chéo thứ ba bao quanh hộp đệm. Theo mặc định, giá trị biên của hầu hết các phần tử HTML được đặt thành 0. Tăng kích thước của một phần tử biên giới làm tăng khoảng cách giữa hộp đệm và hộp lề. Lưu ý rằng màu sắc, độ dày và kiểu dáng của đường viền có thể được điều chỉnh.
- Hộp lề là hộp chồng chéo thứ tư và cuối cùng bao gồm không gian trong suốt bên ngoài đường viền của một phần tử. Theo mặc định, giá trị ký quỹ của một số phần tử HTML được đặt thành 0, mặc dù một số phần tử đã chỉ định các giá trị lề là mặc định của chúng, chẳng hạn như
6 đến.yellow-div { background-color:yellow; width: 500px; }
9 Thẻ tiêu đề. Biên độ của hai yếu tố khác nhau cũng được phép chồng chéo đôi khi trong một hành vi gọi là sự sụp đổ lề. Khi điều này xảy ra, kích thước ký quỹ mặc định với kích thước của bất kỳ phần tử nào là biên độ lớn nhất..yellow-div { background-color:yellow; width: 500px; }
Bây giờ bạn đã quen thuộc với các thành phần của mô hình hộp CSS, bạn có thể thực hành tạo kiểu cho các hộp khác nhau này để khám phá cách chúng làm việc cùng nhau để bố trí và tạo kiểu cho một phần tử HTML. Bạn sẽ bắt đầu bằng cách tạo một phần tử
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Điều chỉnh kích thước nội dung của phần tử HTML với CSS
Đầu tiên, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.
Xóa mọi thứ trong tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
styles.css
.yellow-div {
background-color:yellow;
}
Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Tiếp theo, xóa tất cả nội dung trong tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
index.html
<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
div>
Lưu tệp và tải nó trong trình duyệt. Bạn sẽ nhận được kết quả sau:
Trang web của bạn sẽ hiển thị một hộp màu vàng chứa nội dung văn bản bạn đã thêm vào tệp HTML. Hiện tại, chỉ có hộp trong cùng, hộp nội dung có kích thước và giá trị; Các phần đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý rằng chiều rộng và chiều cao của hộp màu vàng được tự động xác định bởi kích thước của nội dung văn bản bên trong thùng chứa
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Lưu ý: Bạn có thể sử dụng các công cụ nhà phát triển web Firefox, để xem mô hình hộp của phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Công cụ trong thanh menu trên cùng và chọn các công cụ chuyển đổi/chuyển đổi web của Web "từ menu thả xuống. Các công cụ phát triển sẽ xuất hiện ở dưới cùng của cửa sổ của bạn. Nhấp vào biểu tượng mũi tên ở bên trái Menu và sau đó nhấp vào phần tử mà bạn muốn kiểm tra. Mô hình hộp của phần tử đã chọn sẽ hiển thị ở phía dưới bên phải của ngăn cửa sổ Công cụ phát triển. Bạn có thể cần mở rộng cửa sổ để xem nó.: You can use Firefox’s Web Developer tools to view the box model of an HTML element and the values set for each box. Navigate to the Tools menu item in the top menu bar and select “Web Developer/Toggle Tools" from the dropdown menu. The Developer Tools should appear in the bottom of your window. Click the the arrow icon on the far left of the tool kit menu and then click on the element that you wish to inspect. The box model of the selected element will show up in the bottom right of the Developer Tools window pane. You may need to expand the window to view it.
Tiếp theo, hãy để chỉ định độ rộng của container
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding-left:25px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 25px;
}
styles.css
.yellow-div {
background-color:yellow;
width: 500px;
}
Lưu tệp và tải nó trong trình duyệt của bạn. Container
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Lưu ý rằng bạn cũng có thể chỉ định chiều cao của phần tử
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Cách điều chỉnh kích thước đệm của phần tử HTML với CSS
Tiếp theo, hãy để tăng kích thước đệm để nghiên cứu cách nó thay đổi màn hình của phần tử
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding-left:25px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Bạn có thể thay đổi kích thước của phần đệm bằng cách điều chỉnh kích thước giá trị đệm. Bạn cũng có thể thay đổi kích thước đệm của các mặt cụ thể của phần tử bằng cách sử dụng các thuộc tính sau:
selector {
border: size style color;
}
selector {
border: size style color;
}
selector {
border: size style color;
}
selector {
border: size style color;
}
selector {
border: size style color;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding-left:25px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 25px;
}
Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Biết cách chỉ định kích thước đệm cho các mặt riêng lẻ của một yếu tố có thể hữu ích khi sắp xếp nội dung trên trang web.
Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML với CSS
Bây giờ, hãy thực hành cài đặt các giá trị cho đường viền của phần tử HTML. Thuộc tính biên giới cho phép bạn đặt kích thước, màu sắc và kiểu dáng (như
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
selector {
border: size style color;
}
Hãy thử thêm các tuyên bố được tô sáng sau đây để thêm một đường viền màu đen rắn rộng năm pixel:
styles.css
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
. Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Bạn có thể thử thay đổi các giá trị để nghiên cứu cách chúng thay đổi màn hình của phần tử trong trình duyệt. Giống như với phần đệm, bạn cũng có thể chỉ định phía đường viền mà bạn muốn điều chỉnh với các thuộc tính
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
margin:100px;
}
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
margin:100px;
}
Điều chỉnh kích thước lề của phần tử HTML với CSS
Tiếp theo, hãy để thử điều chỉnh kích thước của lề của một phần tử với CSS. Trong bài tập này, chúng tôi sẽ cung cấp cho lề một giá trị rất lớn để dễ dàng thấy cách hiển thị kích thước ký quỹ trong trình duyệt. Thêm khai báo được tô sáng sau vào quy tắc của bạn trong tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
styles.css
.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
margin:100px;
}
Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Lưu ý: Bạn có thể nhận thấy rằng hộp màu vàng ban đầu có một biên nhỏ của không gian trắng giữa phía trên và bên trái của nó và các cạnh của chế độ xem. Biên độ này được tạo tự động bởi một số trình duyệt để cho phép không gian giữa các cạnh của chế độ xem và nội dung trang web. Bạn có thể loại bỏ lề này bằng cách đặt tỷ lệ trên và bên trái về 0.: You may have noticed that the yellow box originally had a small margin of white space between its top and left side and the edges of the viewport. This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero.
Giống như phần đệm và đường viền, kích thước của các mặt cụ thể của lề có thể được đặt bằng cách sử dụng
<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
div>
<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
div>
<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
div>
<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
div>
Trước khi tiếp tục, hãy thêm một container
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
styles.css
. . .
.blue-div {
height:100px;
width:100px;
background-color: blue;
}
Lưu tệp và quay lại tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
. . .
.blue-div {
height:100px;
width:100px;
background-color: blue;
}
index.html
…
<div class="blue-div">div>
Lưu tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
Trình duyệt bây giờ sẽ hiển thị một hộp màu xanh rộng 100 pixel và cao 1000 pixel. Hộp màu xanh này phải là 100 pixel bên dưới hộp màu vàng trên tài khoản của lề hộp màu vàng. Nói chung, các yếu tố xung quanh theo mặc định sẽ được đẩy ra khỏi một yếu tố trên tài khoản của biên độ của nó. Tuy nhiên, hãy lưu ý rằng lề của các yếu tố liền kề thường sẽ chồng chéo lên do sự sụp đổ lề. Kích thước của lề chồng chéo được xác định bởi kích thước của lề lớn nhất giữa hai yếu tố.
Sự kết luận
Trong hướng dẫn này, bạn đã tìm hiểu về mô hình hộp CSS và cách điều chỉnh kích thước của từng nội dung, đệm, đường viền và các thuộc tính lề. Hiểu hành vi của các thuộc tính này và cách đặt giá trị cho chúng là hữu ích khi tổ chức và tạo kiểu nội dung trên trang web. Kiến thức này sẽ hữu ích khi xây dựng trang web trình diễn trong các hướng dẫn còn lại. Trong hướng dẫn tiếp theo, bạn sẽ thiết lập một tệp
[label styles.css]
.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}
