<commit_before>---
layout:     post
title:      CSS常见问题总结
subtitle:   CSS
date:       2017-07-22
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: CSS
---

## img标签之间的空白间隙问题

#### 水平方向的空隙
- 因为不同 img 标签之间有回车换行符/空格，它们会在页面上展示出来。

- 解决：把相邻的 img 标签紧挨着写不换行也不加空格，或者把回车换行符/空格注释掉。

[Demo](https://codepen.io/ywg228/pen/brbvLW)

#### 垂直方向的空隙
- 垂直方向之所以出现空隙，是因为 img 标签是行内（inline）元素，而行内元素的 verticle-align 默认是和父元素的 baseline 对齐的，而 baseline 又与父元素底边有一定距离。

- 解决1：设置 img 元素的对齐方式，vertical-align: bottom, vertical-align: center, vertical-align: top，都可以。

- 解决2：设置容器的字体大小为0，font-size: 0;

- 解决3：把 img 元素设置为块级元素， display: block;

[Demo](https://codepen.io/ywg228/pen/EvYEpM)


## 垂直方向的外边距合并叠加问题
如果上盒子有margin-bottom，下盒子有margin-top，结果两盒子之间的间距取两者的较大值。
建议：垂直方向使用margin时，尽量都用margin-bottom。

[Demo](https://codepen.io/ywg228/pen/EvRbPm)<commit_msg>Update 2017-07-22-CSS常见问题总结.md<commit_after>---
layout:     post
title:      CSS常见问题总结
subtitle:   CSS
date:       2017-07-22
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: CSS
---

## img标签之间的空白间隙问题

#### 水平方向的空隙
- 因为不同 img 标签之间有回车换行符/空格，它们会在页面上展示出来。

- 解决：把相邻的 img 标签紧挨着写不换行也不加空格，或者把回车换行符/空格注释掉。

[Demo](https://codepen.io/ywg228/pen/brbvLW)

#### 垂直方向的空隙
- 垂直方向之所以出现空隙，是因为 img 标签是行内（inline）元素，而行内元素的 verticle-align 默认是和父元素的 baseline 对齐的，而 baseline 又与父元素底边有一定距离。

- 解决1：设置 img 元素的对齐方式，vertical-align: bottom, vertical-align: middle, **vertical-align: top**，都可以。

- 解决2：设置容器的字体大小为0，font-size: 0;

- 解决3：把 img 元素设置为块级元素， display: block;

[Demo](https://codepen.io/ywg228/pen/EvYEpM)


## 垂直方向的外边距合并叠加问题
如果上盒子有margin-bottom，下盒子有margin-top，结果两盒子之间的间距取两者的较大值。
建议：垂直方向使用margin时，尽量都用margin-bottom。

[Demo](https://codepen.io/ywg228/pen/EvRbPm)

## inline-block 在IE6,7下无效
兼容：
```
.box {
  dsplay: inline-block;
  *display: inline;
  *zoom: 1;
}
```

## inline-block元素间的空白间隙问题
在父容器添加；
```
.parent {
  font-size: 0;
}
```
{'fraction_non_alphanumeric': 0.1520811099252935, 'fraction_numerical': 0.029882604055496264, 'mean_word_length': 4.434782608695652, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3858306', 'n_tokens_mistral': 1222, 'n_tokens_neox': 1249, 'n_words': 127}