【前端】消除div排列的空隙

遇到的问题

大作业要实现这样的一个布局效果

当时css设置是这样的（选择器就简单写1，2，3了）：

1 {
	display: inline-block;
	width: 50%;
	height: 50%;
}

2 {
	display: inline-block;
	width: 50%;
	height: 50%;
}

3 {
	width: 100%;
	height: 50%;
}

但这样的样式下，1号块和2号块各占了一行，调整1号块width: 45%;，1，2确实到了同一行，但中间产生了空隙，与此同时12和3之间也有空隙

问题所在

开发时写的html代码一般是下面这样的排版：

      <div class="link-content">
        <div id="content-item-one"></div>  //*
        <div id="content-item-two"></div>  //**
        <div id="content-item-three"></div>
      </div>

而浏览器会将*和**之间的回车解析成空隙

解决方法

法1

改变代码排版，即去掉回车：

      <div class="link-content">
        <div id="content-item-one"></div><div id="content-item-two"></div><div id="content-item-three"></div>
      </div>

这个方法确实可以去掉1号和2号块之间的空隙，但不知道为什么他们和3号块之间的空隙没能去掉……于是继续寻找方法

法2

将父元素的font-size设为0，表现到我的example上是：

.link-content {
	font-size: 0;
}

这样不需要改变代码排版，可以去掉所有空隙