Box Model | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM]
NAVIGATION
Những điều nên tránh khi thiết kế trang web
Phần mềm FTP miễn phí – FileZilla
Giới thiệu về CSS3
jQuery Image Hover
Nguồn icon miễn phí
Đừng làm nửa chừng rồi ngưng
Giao diện mới cho Izwebz
Lĩnh vực trung tâm
Cách chọn domain
Những điều nên tránh khi tối ưu hoá công cụ tìm kiếm
PHP CO BẢN – NÂNG CAO
tìm hiểu cú pháp và phương thức PHP
Phép toán và phát biểu có điều kiện trong php
$_POST và $_GET
Làm quen đối tượng Session
Khai báo hàm, chèn tập tin và tập tin dùng chun
Cách xử lý chuỗi, mảng, kiểu DataTime
Thao tác trên cơ sở dữ liệu MySQL
PHP và Database
Phân trang với PHP
Xóa, Cập nhật dữ liệu dạng mảng
Tạo Mailing List: PHP & Mysql
RECENT COMMENTS
Random News Popular
EMAIL ARTICLES
Box Model
October 8, 2008 7 comments
Bất cứ thành phần nào bạn tạo ra trong code XHTML đều được bao

http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM]
QUẢNG CÁO
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
Tạo WordPress Theme – Dựng xHTML (16)
chicken_roll: hahaha hay quá hết chổ trê (thanks you
very much much…) nghe anh nói đây ko
Tạo WordPress Theme – Slice hình (22)
chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều
từ anh và Anh CS thanks phát cho có
Tạo WordPress Theme – Search form và Random
Posts (15)
DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ:
<script type="text/javascript&
PHP Căn Bản – Bài 9 (40)
pham duy: Vang ban angelthao_0984884679 da noi
dung do chung t con chan chu gi nua ma khong giup
doan: ai muốn xem bằng file swf thì down KMP về mà
dùng cái này còn hay hơn media của win nhiều
Lập trình web và sự Lười nhác (23)
kien: Không còn gì để nói :-s
Tạo trang web đầu tiên (41)
ho nga: ?
ho nga: huhu sao làm web mệt dzữ vậy a hai ui…?
Padding: là vùng nằm giữa đường viền và nội dung. Padding thường được sử dụng để tạo
ra khoảng trống giữa đường biên và chữ như 2 ví dụ dưới đây.

here. Join Free now!
www.your-site.com
Your Ad Here!
BIDVERTISER ADS
Ở những ví dụ trên mỗi một loại đều có 3 giá trị tương ứng và theo thứ tự là: border-
style, border-width và border-color. Bạn có thể khai báo chúng riêng biệt như sau:
hoặc gộp chung vào một như sau
Margin
Bên ngoài border là margin, nó được dùng để tạo khoảng cách giữa các thành phần. Các
thành phần margin, border và padding đều được mặc định là 0. Nhưng mỗi trình duyệt lại
mặc định một kiểu, do vậy khi viết code CSS bạn nên luôn reset các giá trị này lại thành 0 để
tránh phiền phức sau này.
Tính bù của Margin
Tính năng cuối cùng của Margin mà bạn cần biết là tính bù của nó. Ví dụ ở hình dưới đây tôi
có ba đoạn văn bản và đều có margin-top: 50px và margin-bottom: 30px được xếp chồng lên
nhau. Có thể bạn nghĩ vì margin-bottom của đoạn văn bản trên là 30px và margin-top của
đoạn văn bản kế tiếp là 50px thì tổng cộng 2 đoạn văn này sẽ phải cách nhau một khoảng là
80 px. Nhưng trong thực tế lại không phải vậy. Khi có hai giá trị margin được thiết lập, thì
margin lớn sẽ “nuốt” margin bé hay nó bù vào nhau. Do vậy ở ví dụ dưới, nó chỉ cách nhau
50 px và khoảng cách giữa chúng là khoảng cách của margin được thiết lập lớn hơn.
Đoạn văn thứ nhất
Đoạn văn thứ hai
Đoạn văn thứ ba
Code CSS
Cách viết rút gọn
Trong ví dụ trên bạn thấy tôi dùng {margin: 50px 0px 30px 0px;} đây chính là cách
viết tắt trong CSS khi bạn phải làm việc với Border, Padding và Margin. Thứ tự của nó luôn
theo chiều kim đồng hồ Top, Right, Bottom và Left. Bạn có thể nhớ như kiểu 12 giờ, 3 giờ, 6
giờ và 9 giờ.
Ví dụ khi bạn muốn tác động đến Margin của một thành phần bất kỳ bạn có thể viết đầy đủ

1 {margin:12px;}
1 {border:0px 0px 2px 4px;}Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Tran says:
October 18, 2009 at 6:56 am
Em gặp rắc rối với margin, ở dưới đây, em cho margin vào 1 class, rồi trong file html
em đã chèn class đó vào thì margin không chạy. Em thật sự không hiểu sai ở đâu,
Reply
Box Model | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM]
đây là CSS của em :
@charset "utf-8";
/* CSS Document */
tieude, cth1, date, time, match {font-family:Tahoma,
Geneva, sans-serif; }
tieude {font-size:36px; color:#F00; border-style:solid;
border-width:thin; border-color:#F00; padding:5px; }
cth1 {font-size:14px; color:#9C9; }
date {font-size:24px; color:#C66; }
time {font-size:18px; color:#F96; }

Demon Warlock says:
October 18, 2009 at 7:41 am
Thuộc tính margin đâu cần phải sử dụng class em? nếu em muốn thành phần nào có
margin thì em sử dụng selector để chọn nó thôi.
Ví dụ em muốn tieude có margin thì em làm thế này

dụng vào hả anh? nó có ảnh hưởng ntn? có cần thiết để giá trị margin-bottom: 30px
hay là margin-bottom: 0px;
Clackken Smith says:
July 21, 2010 at 6:27 pm
Có vẻ bạn chưa hiểu về giá trị Margin. Hệ thống margin bao gồm 4 kiểu.
margin-top : Khoảng cách phía trên.
margin-bottom : Khoảng cách phía dưới.
margin-left : Khoảng cách bên trái.
margin-right : Khoảng cách bên phải.
Các giá trị trên sẽ độc lập với nhau, nếu bạn chỉ muốn box của mình có khoảng cách
phía trên mà thôi, còn lại các khoảng cách khác thì không thay đổi thì bạn chỉ sử
dụng mỗi margin-top.
- Trường hợp bạn muốn khoảng cách đều thì chỉ sử dụng giá trị margin mà thôi,
không cần các giá trị top, bottom…
Reply
Tên bạn
Email
Website
Comment
Submit
Box Model | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM]
Chọn kiểu gõ: Tự động TELEX VNI Tắt
Luu ý khi post comment:
Không "bóc tem" topic
Dùng lời lẽ có văn hoá và lịch sự
Xem trang FAQs trước khi hỏi
Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
Wrap code trong dấu `backtick` (dấu trên phím Tab)
© 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock