Chạy thử Ví dụ Thuộc tính margin trong CSS

Trình soạn thảo - Chạy thử Ví dụ Thuộc tính margin trong CSS

Kết quả - Chạy thử Ví dụ Thuộc tính margin trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính margin trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
div p {background:green;margin:0px;padding:0px;color:#fff}
</style>
</head>
<body>

<h1>Chạy thử Ví dụ Thuộc tính margin trong CSS</h1>

<p>Dùng để canh khoảng cách giữa các cạnh của thẻ HTML với phần tử cha hoặc với phần tử HTML khác, giúp canh chỉnh khoảng cách của 4 cạnh trên, phải, dưới, trái của phần tử HTML so với phần tử HTML khác tùy theo ý muốn:</p>

<div><p style="margin:5px" >margin:5px (Cách 4 cạnh 5px)</p></div>

<div><p style="margin:5px 10px 15px 20px" >margin:5px 10px 15px 20px (cách trên 5px, cách phải 10px, cách dưới 15px, cách trái 20px)</p></div>

<div><p style="margin:5px 20px" >margin:5px 20px(cách trên và dưới 5px, cách phải và trái 20px)</p></div>

<div><p style="margin:0px 20px" >margin:0px 20px(cách trên và dưới 0px, cách phải và trái 20px)</p></div>

<div style="margin:30px 0px"><p>margin:30px 0px(cách trên và dưới 30px, cách phải và trái 0px)</p></div>

<div><p style="margin:5px 10px 20px" >margin:5px 10px 20px (cách trên 5px, cách phải cách trái 10px, cách dưới 20px)</p></div>

</body>
</html>
  • Chạy thử Ví dụ Thuộc tính margin trong CSS nằm trong bài viết Thuộc tính margin trong CSS
  • ★★★★★ ★★★★★