Box model trong CSS

Over 10 working discount & coupon codes is active for 61 users, enjoy!

11-26-2013 09-56-43

Box model trong CSS

Box model trong CSS (mô hình hộp)  là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML tất cả các thành phần đều tồn tại một hộp bao quanh nó.

Mô hình Box model bao gồm padding (vùng đệm), border (đường viền) và margin (canh lề). Mặc định thì tất cả các giá trị này đều bằng 0, do đó chỉ khi nào các thuộc tính này được khai báo thì ta mới nhìn thấy sự thay đổi của chúng.

11-26-2013 09-56-43 

Padding: là vùng nằm giữa nội dung và đường viền (border), nó tạo ra một khoảng trống giúp cho nội dung được trình bày rõ ràng hơn .

Các giá trị của padding: bao gồm padding-top; padding-right; padding-bottom; và padding-left.

Ví dụ: Code CSS  như sau:

 

Khác: 

 

 

Code nay ngắn gọn hơn nhưng tính năng vẫn đầy đủ: khi đó padding sẽ  cách đều xung quanh theo giá trị là 50px;

 Code HTML:   

 

Border: sẽ quy định độ dày, màu sắc và kiểu hiện thị cũng như kiểu của đường viền.

Các giá trị của border bao gồm: border-width; border-style và border-color, chúng ta luôn phải khai báo border-style, nếu không được khai báo thì nó sẽ có giá trị bằng 0, lúc đó các giá trị của border-with và border-color sẽ không được hiển thị.

Ví dụ: Code CSS

 

Margin: margin là phần nằm ngoài cùng trong mô hình Box model. Nó sẽ tạo ra khoảng các giữa các thành phần với nhau

Các giá trị của margin: bao gồm margin-top; margin-right; margin-bottom; và margin-left.

Ví dụ: Code CSS:

 

  • Chú ý:  Khi giá trị margin là: margin:auto thì mô hình box  của chúng ta sẽ được nằm giữa:

Ví dụ: Code CSS:  

 

Tóm lại:  Box model của chúng ta sử dụng chung  1 class(lớp) thì ta nên viết chung với nhau. Chẳng hạng như:

 

Chúc các bạn thành công!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

No Comments

Leave Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*