如何设定CSS控制元素内部的元素之间间距

html-css011

如何设定CSS控制元素内部的元素之间间距,第1张

设定CSS控制元素内部的元素之间间距，首先需要理解的就是css中的margin和padding的意思和使用，具体用法，如图：

元素内部的间距，需要的就是有多个div的嵌套，或者说是有多个上下类的元素，通过给这些元素一个id或者是class，然后在用css来控制，具体看下代码：

<html>

<head>

<style>

#round{

width:400px

height:200px

}

#div2{

width:300px

height:50px

margin-top:10px         //距离上边的距离是10px

margin-left:20px //距离左边的距离是20px

}

</style>

</head>

<body>

<div id="round">

<div id='div2'>

<p>测试文字</p>

</div>

</div>

</body>

</html>

1.新建一个html文件，命名为test.html，用于讲解css如何设置按钮文字与边框的间距。2.在test.html文件中，使用button标签创建一个按钮。3.在test.html文件中，给button标签添加一个class属性。4.在css标签内，通过class（test）设置按钮的样式，定义文字大小为20px。5.在css标签内，再使用padng属性设置按钮的内边距，例如，设置上下内边距为10px，左右内边距为20px。6.在浏览器打开test.html文件，查看实现的效果。