Khoảng trắng bí ẩn bên dưới thẻ img (Trích từ Techmaster vn)

10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img



(/)
Trang cá nhân (/user/dashboard)  

 

Gõ từ khóa để tìm kiếm...

Khoảng trắng bí ẩn bên dưới thẻ img
TRANG CHỦ (/)   BLOG (/POSTS)   KHOẢNG TRẮNG BÍ ẨN BÊN DƯỚI THẺ IMG (/POSTS/33592/HOC­LAP­TRINH­WEB­CO­BAN)

Khi sử dụng thẻ img để chèn ảnh vào trang web, có 1 hiện tượng khá thú vị mà không phải ai cũng biết hoặc để
ý đến. Đó là nếu bọc thẻ img bởi 1 thẻ div (hoặc bất kỳ 1 thẻ nào khác) thì sẽ xuất hiện 1 khoảng trắng nhỏ ở
bên dưới ảnh.

0
Thích
Chia sẻ

Nếu chúng ta thiết lập padding cho thẻ div thì do khoảng trắng này mà khoảng cách phần bên dưới vẫn lớn hơn phần
bên trên. Vậy khoảng trắng này từ đâu mà có?

/>
1/17

10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Để hiểu rõ về vấn đề này, chúng ta phải nắm rõ về HTML, CSS ( />css3­va­javascript), đặc biệt là khái niệm về Inline element và Block element.
Mặc định thẻ img trong HTML là một Inline element, tức là nó được coi như là text. Do đó nó sẽ được browser xử lý như
với text thông thường. Đến đây ta lại phải biết một chút về text, một số khái niệm về text trong kỹ thuật in ấn:
Trên cùng 1 dòng, các chữ cái sẽ nằm trên một đường thẳng gọi là baseline (đó cũng là giá trị mặc định của
thuộc tính vertical­align trong CSS)
Một số chữ cái, ký tự đặc biệt sẽ có 1 phần nằm dưới baseline ví dụ như y, j, p, g, ... và phần nằm dưới đó
gọi là descenders (tương tự, có 1 phần nằm trên text gọi là ascenders)

 Do đó trình duyệt sẽ tạo ra 1 khoảng trắng dành cho phần descenders của text, nếu chúng ta viết thêm 1 vài ký tự có
descenders vào bên cạnh ảnh và tăng font­size của chúng lên, chúng ta sẽ thấy rõ tại sao lại có khoảng trắng nhỏ bên
dưới ảnh.
/>
2/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

❝
Khóa  học  HTML5,  CSS3,  JavaScript  ­  jQuery  ( />css3­va­javascript) dạy từ căn bản cho người mới bắt đầu, có nhiều ví dụ mẫu, tip tricks để bạn có thể thiết kế
web site chuyên nghiệp. Khóa học cơ bản cần thiết để học nâng cao khóa Node.js hay PHP

Vậy là chúng ta đã khám phá được khoảng trắng bí ẩn bên dưới thẻ img. Và để xử lý khoảng trắng đó chúng ta có thể
dùng các cách sau:
Dùng thuộc tính vertical­align cho thẻ img với giá trị là middle.

Dùng thuộc tính line­height cho thẻ div với giá trị là 0.
Chuyển img thành Block element với thuộc tính display.
Ngày đăng: 10/10/2015



TOP

← Bài trước (../33591/uu­dai­hoc­phi­hoc­lap­trinh)

Lập trình web (99) (/categories/79/p/1/Lập trình web)
/>
Bài sau → (../33593/hoc­lap­trinh­web­bang­ngon­ngu­php)

HTML (4) (/categories/453/p/1/HTML)

lập trình (176) (/categories/444/p/1/lập trình)
3/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

CSS (4) (/categories/454/p/1/CSS)

(../33577/cach­su­dung­sublime­text)
Reformat Code HTML, CSS trong
Sublime text (../33577/cach­su­
dung­sublime­text)

(../33569/host­static­website­voi­
github)
Host static website với Github
(../33569/host­static­website­voi­
github)

(../33579/xuat­ra­file­excel)
Format cell khi export HTML table
ra Excel (../33579/xuat­ra­file­
excel)

ĐẶNG QUANG HUY
Lập trình viên web tại Techmaster. Đã tham gia nhiều dự án gia công trên nền tảng PHP,
Nodejs, và còn là giảng viên Khóa học lập trình web cơ bản với HTML, CSS, Javascript.

/>
4/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

0 bình luận

Sắp xếp theo  Hàng đầu

Thêm bình luận...

Facebook Comments Plugin

SẮP KHAI GIẢNG
Lập trình iOS Objective-C
NGÀY 30/10/2015

(/khoa­hoc/8212/lap­trinh­ios­objective­c)

BÀI VIẾT ĐƯỢC QUAN TÂM
10 Lời Khuyên Từ Các Chuyên Gia Php Dành Cho Người Mới Bắt Đầu

(/posts/33611/php­danh­cho­nguoi­moi­bat­dau)

/>
5/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Trở Thành Một Lập Trình Viên Full Stack

(/posts/33614/lap­trinh­vien­full­stack­la­gi)

/>
6/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Bạn Muốn Tự Học Lập Trình? Điều Đó Có Thể - Nhưng Không Dễ Dàng

(/posts/33612/tu­hoc­lap­trinh­thanh­cong)

/>
7/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Thực Tập Lập Trình Dài Hạn 12 Tháng Tại Techmaster: Web Và Mobile

(/posts/33583/thuc­tap­lap­trinh­web­mobile)

/>
8/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

5 Ngôn Ngữ Lập Trình Tốt Nhất Cho Người Mới Bắt Đầu

(/posts/33449/ngon­ngu­lap­trinh­tot­nhat­cho­nguoi­moi­bat­dau)

/>
9/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Kĩ Thuật Ipc (inter Process Communication - Liên Lạc Giữa Các Process) Trong Kiến Trúc Microservice

(/posts/33616/ki­thuat­ipc­trong­kien­truc­microservice)

/>
10/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Unit Test Dùng Để Làm Gì Và Kinh Nghiệm Viết Unit Test Tốt Nhất

(/posts/33618/unit­test­dung­de­lam­gi­va­kinh­nghiem­viet­unit­test­tot­nhat)

/>
11/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Giải Mã Về 3 Loại Lập Trình Web: Front-end Vs Back-end Vs Full Stack

(/posts/33487/lap­trinh­web­front­end­vs­back­end­vs­full­stack)

/>
12/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Sự Khác Nhau Giữa Process Và Thread

(/posts/33604/su­khac­nhau­giua­process­va­thread)

/>
13/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Ngôn Ngữ Lập Trình Tốt Nhất Để Học Trong Năm 2015

(/posts/33442/ngon­ngu­lap­trinh­tot­nhat)

/>
14/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

Bùi Xuân Hiếu


Em thấy nội dung bài học khá ổn, tất cả các bài học đề có sample code cho học viên tham khảo. Tuy nhiên chương
trình học khá nhanh nên em chưa theo kịp chương trình dạy. Nếu giảng viên có thể dạy chậm lại một chút và có thêm một số
buổi cho học viên làm bài tập. Giảng viên nhiệt tình trình độ chuyên môn Pro. Phong cách giảng dạy chuyên nghiệp. Thời
gian tới em mong muốn techmaster mở thêm một lớp về C++ và một khóa về cấu trúc dữ liệu và giải thuật để học viên có thể
theo học và nâng cao tư duy lập trình. Nếu techmaster mở một trong hai lớp trên em sẽ theo học.

DANH MỤC BÀI VIẾT
Agile (8) (/categories/440/p/1/agile)

Altassian (4) (/categories/72/p/1/altassian)

/>
Android (51) (/categories/78/p/1/android)
15/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

ASP.net (6) (/categories/86/p/1/asp­net)

C++ (11) (/categories/438/p/1/c)

công việc (101) (/categories/448/p/1/cong­viec)

CSS (4) (/categories/454/p/1/css)

Database (8) (/categories/435/p/1/database)

JavaScript (11) (/categories/224/p/1/javascript)

lập trình php (24) (/categories/445/p/1/lap­trinh­php)

iOS (164) (/categories/70/p/1/ios)

lập trình (176) (/categories/444/p/1/lap­trinh)

lập trình ứng dụng (80) (/categories/451/p/1/lap­trinh­ung­dung)

Mac (10) (/categories/88/p/1/mac­2)

Lập trình web (99) (/categories/79/p/1/lap­trinh­web)
Microservice (3) (/categories/455/p/1/microservice)

News (49) (/categories/9/p/1/news)
Odoo (3) (/categories/456/p/1/odoo)

Project Management (22) (/categories/83/p/1/project­management)
Ruby on Rails (32) (/categories/80/p/1/ruby­on­rails)

Nghề nghiệp (38) (/categories/436/p/1/nghe­nghiep)
PHP (55) (/categories/81/p/1/php)

Python (9) (/categories/439/p/1/python)

Scala (20) (/categories/73/p/1/scala)

SharePoint (6) (/categories/75/p/1/sharepoint)

Swift (8) (/categories/417/p/1/swift)

TechMaster (104) (/categories/85/p/1/techmaster)

Tutor (65) (/categories/67/p/1/tutor)

Twitter Boostrap (1) (/categories/442/p/1/twitter­boostrap)

ứng dụng (1) (/categories/449/p/1/ung­dung)
VMware (1) (/categories/89/p/1/vmware)

Unity3D (13) (/categories/432/p/1/unity3d)

Tips and tricks (2) (/categories/443/p/1/tips­and­tricks)
Uncategorized (29) (/categories/1/p/1/uncategorized)
việc làm (99) (/categories/446/p/1/viec­lam)

WindowsPhone (44) (/categories/77/p/1/windowsphone)

/>
Java (70) (/categories/68/p/1/java)

lập trình ios (70) (/categories/447/p/1/lap­trinh­ios)

lập trình ứng dụng iphone (32) (/categories/452/p/1/lap­trinh­ung­dung­iphone)

Node.js (29) (/categories/434/p/1/nodejs)

Game (23) (/categories/93/p/1/game)

Kiểm thử (5) (/categories/66/p/1/kiem­thu)

lập trình Android (18) (/categories/450/p/1/lap­trinh­android)

Microsoft (16) (/categories/76/p/1/microsoft)

Education (27) (/categories/6/p/1/education)

Facebook (2) (/categories/257/p/1/facebook)

HTML (4) (/categories/453/p/1/html)

Linux (29) (/categories/71/p/1/linux)

Cuộc sống (108) (/categories/74/p/1/cuoc­song)

Design (26) (/categories/69/p/1/design)

Eletronics (1) (/categories/433/p/1/Eletronics)
Git (3) (/categories/437/p/1/git)

Cloud (7) (/categories/82/p/1/cloud)

WordPress (1) (/categories/430/p/1/wordpress)

16/17


10/29/2015

Khoảng trắng bí ẩn bên dưới thẻ img

 Cơ sở 1:

Số 14, ngõ 4, Nguyễn Đình Chiểu, Hai Bà Trưng, Hà Nội
( />
 Cơ sở 2:

Phòng 2304, tầng 23, toà nhà StarCity, 81 Lê Văn Lương, Nhân Chính, Thanh Xuân, Hà Nội
( />
 Điện thoại:

Mr. Cường: 090.220.9011 (tel:0902209011)

✉ Email:

 (mailto:)

/>
Mr. Cần: 093.222.5065 (tel:0932225065)

17/17