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/HOCLAPTRINHWEBCOBAN)
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 ( />css3vajavascript), đặ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 verticalalign 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 fontsize 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 ( />css3vajavascript) 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 verticalalign cho thẻ img với giá trị là middle.
Dùng thuộc tính lineheight 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/uudaihocphihoclaptrinh)
Lập trình web (99) (/categories/79/p/1/Lập trình web)
/>
Bài sau → (../33593/hoclaptrinhwebbangngonnguphp)
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/cachsudungsublimetext)
Reformat Code HTML, CSS trong
Sublime text (../33577/cachsu
dungsublimetext)
(../33569/hoststaticwebsitevoi
github)
Host static website với Github
(../33569/hoststaticwebsitevoi
github)
(../33579/xuatrafileexcel)
Format cell khi export HTML table
ra Excel (../33579/xuatrafile
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
(/khoahoc/8212/laptrinhiosobjectivec)
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/phpdanhchonguoimoibatdau)
/>
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/laptrinhvienfullstacklagi)
/>
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/tuhoclaptrinhthanhcong)
/>
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/thuctaplaptrinhwebmobile)
/>
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/ngonngulaptrinhtotnhatchonguoimoibatdau)
/>
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/kithuatipctrongkientrucmicroservice)
/>
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/unittestdungdelamgivakinhnghiemvietunittesttotnhat)
/>
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/laptrinhwebfrontendvsbackendvsfullstack)
/>
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/sukhacnhaugiuaprocessvathread)
/>
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/ngonngulaptrinhtotnhat)
/>
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/aspnet)
C++ (11) (/categories/438/p/1/c)
công việc (101) (/categories/448/p/1/congviec)
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/laptrinhphp)
iOS (164) (/categories/70/p/1/ios)
lập trình (176) (/categories/444/p/1/laptrinh)
lập trình ứng dụng (80) (/categories/451/p/1/laptrinhungdung)
Mac (10) (/categories/88/p/1/mac2)
Lập trình web (99) (/categories/79/p/1/laptrinhweb)
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/projectmanagement)
Ruby on Rails (32) (/categories/80/p/1/rubyonrails)
Nghề nghiệp (38) (/categories/436/p/1/nghenghiep)
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/twitterboostrap)
ứng dụng (1) (/categories/449/p/1/ungdung)
VMware (1) (/categories/89/p/1/vmware)
Unity3D (13) (/categories/432/p/1/unity3d)
Tips and tricks (2) (/categories/443/p/1/tipsandtricks)
Uncategorized (29) (/categories/1/p/1/uncategorized)
việc làm (99) (/categories/446/p/1/vieclam)
WindowsPhone (44) (/categories/77/p/1/windowsphone)
/>
Java (70) (/categories/68/p/1/java)
lập trình ios (70) (/categories/447/p/1/laptrinhios)
lập trình ứng dụng iphone (32) (/categories/452/p/1/laptrinhungdungiphone)
Node.js (29) (/categories/434/p/1/nodejs)
Game (23) (/categories/93/p/1/game)
Kiểm thử (5) (/categories/66/p/1/kiemthu)
lập trình Android (18) (/categories/450/p/1/laptrinhandroid)
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/cuocsong)
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