Margin là gì html
Xin chào mọi người, bài học hôm nay chúng ta hãy bắt tay cùng nhau tìm hiểu về cách sử dụng css margins nhé. Thuộc tính CSS Margin được sử dụng để tạo ra không gian xung quanh các phần tử. Các thuộc tính Margin dùng để thiết lập kích thước của không gian trắng bên ngoài đường viền. Show
Với CSS, bạn có quyền kiểm soát các margin. Có các thuộc tính CSS để thiết lập lề cho mỗi bên của một phần tử. Các thuộc tính của MarginCSS có các thuộc tính để xác định lề cho mỗi cạnh của một phần tử:
Tất cả các thuộc tính căn lề có các giá trị sau:
Lưu ý: giá trị của margin có thể là số âm. Ví dụ về sử dụng thuộc tính margins: h3 { margin-top: 200px; margin-bottom: 110px; margin-right: 130px; margin-left: 90px; }Ở ví dụ trên thẻ h3 sẽ được căn lề với thứ tự trên, dưới, phải, trái cùng với các giá trị sau: 200px,110px,130px và 90px. Margin còn có cách viết gọn.Cú pháp: selecter{ margin : giá trị; }Ví dụ: p{ margin:10px 20px 50px 75px; }Sau đây mình sẽ giải thích về cách hoạt động của ví dụ trên. p{margin:10px 20px 50px 75px;} các giá trị lần lượt sẽ là:
Bên cách đó còn các trường hợp đặc biệt như: margin: 10px 20px 50px; Như ở trên thì các giá trị sẽ là:
margin: 10px 20px; Như ở trên thì các giá trị sẽ là:
Còn thuộc tính margin với một giá trị thì ta có thể hiểu là căn tất cả lề trên, dưới, trái, phải, với cùng một giá trị. Margin với giá trị auto và inheritGiá trị là auto Bạn có thể dùng thuộc tính margin tự động để căn giữa các phần tử bên trong. Chiều rộng của phần tử này đã được chỉ định cùng khoảng trống còn lại sẽ được phân chia bằng nhau giữa lề trái và lề phải: div { width: 500px; margin: auto; border: 1px solid green; }Giá trị inherit Ví dụ sau đây cho phép lề trái được sử dụng thuộc tính phần tử bên ngoài của nó: Bạn có thể tham khảo 1 số kiến thức khác:CSS Layout – Overflow CSS Box Sizing CSS Buttons Cú pháp Css và Selectors Lời kếtỞ trên là tất cả kiến thức về cách sử dụng của CSS margins. Và đến đây bài viết của mình cũng kết thúc rồi xin chào tất cả mọi người. Hẹn mọi người trong các bài tới nha chúc các bạn có một ngày làm việc và học tập thật tốt. Bạn có thể tham khảo kiến thức về lập trình tại đây. Nội dung bài viết Giới thiệu nội dung bài viếtTrong lập trình web CSS, để bố cục một trang web, đoạn văn cân đối và rõ ràng, giúp người dùng có những trải nghiệm tốt hơn. CSS cung cấp thuộc tính margin để thiết lập được khoảng cách giữa các phần tử trong HTM. Trong đó bao gồm các giá trị như margin-bottom canh dưới, margin-top canh trên, margin-left canh trái
và margin-right canh phải. 1. Margin là gìChúng ta sử dụng thuộc tính margin để thiết lập khoảng cách giữa các phần tử trong HTML. Margin gồm có các giá trị như margin-bottom canh dưới, margin-top canh trên, margin-left canh trái, và margin-right canh phải 2. Thuộc tính MarginVí dụ như anh sẽ thiết lập 4 thuộc tính của margin cho đoạn văn bản như sau.
3. Thuộc tính Margin bottomSử dụng để canh chỉnh ở phần dưới của phần tử web. Chúng ta có các giá trị là pixel hoặc %
4. Thuộc tính Margin topSử dụng để canh chỉnh ở phần trên của phần tử web. Chúng ta có các giá trị là pixel hoặc %
5. Thuộc tính Margin leftSử dụng để canh chỉnh ở phần bên trái của phần tử web. Chúng ta có các giá trị là pixel hoặc %
6. Thuộc tính Margin rightSử dụng để canh chỉnh ở phần bên phải của phần tử web. Chúng ta có các giá trị là pixel hoặc %
7. Demo Video
8. Thực hành online và source code
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềmCác khoá học lập trình MIỄN PHÍ tại đây |