CSS3: margin

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tổng quan

Thuộc tính margin của CSS dùng để tạo lề cho đối tượng theo cả bốn mặt của đối tượng đó; tạo lề ở đây được hiểu là tạo khoảng cách giữa đối tượng hiện thời so với đối tượng cạnh nó. Sử dụng thuộc tính margin sẽ tránh được việc phải thiết lập các giá trị cho từng mặt của đối tượng theo 4 thuộc tính riêng biệt là margin-top, margin-right, margin-bottom và margin-left.

Lưu ý là ta có thể sử dụng các giá trị âm (<0) để thiết lập giá trị cho tất cả các mặt của đối tượng.

Giá trị mặc định: cả 4 mặt đều có giá trị tạo lề là 0.

Áp dụng cho: Các phần tử có thể thay đổi hình dạng.

Tính thừa kế: Không có tính thừa kế.

Tỷ lệ %: Phụ thuộc vào độ rộng của khối nội dung.

Media: visual.

Giá trị được tính: Tất cả các phía đều được tính theo tỷ lệ % theo quy định hoặc giá trị tuyệt đối theo đơn vị cụ thể (em, px, pt,  ...).

Khả năng về hoạt ảnh: Có.

Thứ tự chính tắc: Thứ tự chuẩn theo văn phạm chính tắc.

Cú pháp

/* Áp dụng cho 4 phía */
margin: 1em;

/* trên-dưới | trái-phải */
margin: 5% auto;

/* trên | trái-phải | dưới */
margin: 1em auto 2em; 

/* trên | phải | dưới | trái */
margin: 2px 1em 0 auto;

margin: inherit;

Các giá trị

· Giá trị theo đơn vị: nó sẽ thiết lập khoảng cách cố định, cho phép số âm.

· Giá trị theo tỷ lệ %: thiết lập khoảng cách phụ thuộc vào khối chưa, cho phép số âm.

Ví dụ

Tạo khối lập phương (cube) với giao diện trong suốt.

Phần HTML

<table>
  <tbody>
    <tr>
      <th><code>backface-visibility: visible;</code></th>
      <th><code>backface-visibility: hidden;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube showbf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>Tất cả các mặt đều trong suốt và các mặt sau visible so với các măt trước.</p>
      </td>
      <td>
        <div class="container">
          <div class="cube hidebf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>Tất cả các mặt đều trong suốt nhưng các mặt sau lại ẩn so với các mặt trước.</p>
      </td>
    </tr>
  </tbody>
</table>

Phần CSS

/* Phần CSS sử dụng backface-visibility */
.hidebf div {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.showbf div {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Phần CSS tạo bộ chứa các thành phần của khối lập phương */
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Tạo từng mặt của khối lập phương */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px)
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* Phần CSS tạo bố cục cho bảng chứa các khối lập phương */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}



 

Khả năng tương thích trình duyệt

Desktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

12 (-webkit)

10 (10) (-moz)
16 (16)

10

15 (-webkit)

(Yes) (-webkit)

Mobile

Feature

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

3.0 (-webkit)

(Yes) (-webkit)

10.0 (10) (-moz)
16.0 (16)

8.1
11 (-webkit)

(Yes) (-webkit)

(Yes) (-webkit)

Xem thêm

· transform 2D

· transform 3D

· Các thuộc tính liên quan đến transform: backface-visibilityperspectiveperspective-origintransformtransform-origintransform-style

 
» Tiếp: CSS: margin-bottom
« Trước: CSS: list-style-type
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!