html左边距右边距怎么设置(html设置左边距和上边距)

lxf2023-03-13 11:42:01

html设置左边距的方法:首先新建一个HTML文档;然后定义一个box;接着在head标签输入style标签;最后在“#box1”里输入“position:absolute;”定位,并输入letf定义左边距即可。

html左边距右边距怎么设置(html设置左边距和上边距)

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

新建一个HTML文档,如图所示

html左边距右边距怎么设置(html设置左边距和上边距)

定义一个box,输入

<div id="box1"></div>

如图所示

html左边距右边距怎么设置(html设置左边距和上边距)

然后在head标签输入style标签

html左边距右边距怎么设置(html设置左边距和上边距)

定义box的颜色和大小,在style标签里输入

         width: 100px; 
        height: 100px; 
        background-color: #000000;

如图所示

html左边距右边距怎么设置(html设置左边距和上边距)

按f12预览可以看到一个黑色的正方形

html左边距右边距怎么设置(html设置左边距和上边距)

回到dw,在#box1里输入position: absolute;定位,输入letf定义左边距,输入left: 100px;表示距离屏幕左边100个像素,如图所示

html左边距右边距怎么设置(html设置左边距和上边距)

最后按f12预览可以看到正方形有距离左边远了一些

html左边距右边距怎么设置(html设置左边距和上边距)

【推荐学习:HTML视频教程】

以上就是html怎么设置左边距的详细内容,更多请关注AdminJS其它相关文章!