将两个小盒子水平居中 通常是使用 margin auto来实现,间距30 可以外边距都为 15 ,也可以在一个盒子设置外边距为30 px。
这里可以用两种方法来解决,第一个就是给他们一个父元素,两个盒子加上边边距就是430 为父元素的宽 ,加上margin 0 auto的属性就实现了第二就是用弹性盒来做 同样加父元素 只不过注意将盒子为弹性盒 ,display的值为 flex ,父元素加上属性 justify-content:center 就可以实现了。
平时需要多看一下这方面的教程 和 多敲多练习这方面的。
太久没用的东西,偶然用到,竟然忘记了,所以记录一下,加深一下印象
图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。
1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。
上面3中对齐方式都可以
vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
2.将img通过display: block转为块级元素。
转为块级元素之后,就不存在和父级盒子基线对齐的问题了。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:button { margin-right: 10px}。
3、浏览器运行index.html页面,此时成功在2个按钮间插入了1个10px的空隙。