如何用css,在两个按钮间插入一段空隙

html-css014

如何用css,在两个按钮间插入一段空隙,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:button { margin-right: 10px}。

3、浏览器运行index.html页面,此时成功在2个按钮间插入了1个10px的空隙。

因为浏览器默认情况下会为元素添加margin和padding属性,需要将这两个属性初始化为0.

1、新建html文档,在body标签中添加一个div标签,然后为这个div设置一些样式:

2、用浏览器打开编辑好的html文档,这时可以从浏览器中发现浏览器四周留有一些白色空隙:

3、在style标签中为“*”添加“margin: 0padding: 0”样式,“*”表示所有元素,“margin”和“padding”表示外边距和内边距:

4、用浏览器重新打开编辑好的html文档,这时浏览器四周的白色空隙都会被去除:

inline-block本身会自带空隙或者block块级元素和其他元素之间因为空白而产生间隔。

容器设置font-size:0子容器再设置font-size即可

如:

html结构举例:

<div id="box">

    <div>后面的span换行有空隙可根据下面的css设置修正</div>

    <span>测试</span>

</div>

css举例:

#box{font-size:0}

#box div{font-size:14px}

#box span{font-size:12px}