CSS文本框怎么下移

html-css018

CSS文本框怎么下移,第1张

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

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

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

3、浏览器运行index.html页面,此时文本框被成功下移了100px。

想要将css文字下移几个px的方法是有很多的也很简单,一般常见的方法是将文字放在div标签里,然后对div进行样式属性的配置。这样的好处是使文字被外层的div保护着,不会被外部干扰,可以单独进行更多的配置。以下演示具体步骤:

1、首先打开HTML文件编辑器,然后新建一个HTML文件并HTML文件的基本标签元素。

2、添加完基本标签元素后在body标签里添加一个div元素,然后在div元素里添加想要展示的文字。

3、接下来对div元素进行样式属性的设置,这里使用行外式的配置方法,也可以使用行内式,外部式都可以,假定要下移10个px单位,核心代码是margin-top:10px;

4、保存后运行,效果如图:

新建一个html文件,命名为test.html,用于讲解CSS实现文本框怎么下移。在test.html文件内,使用div标签创建一个模块,并设置div的class属性为mydiv,主要用于下面通过该class来设置css样式。在test.html文件内,在div标签内,使用input标签创建一个文本框,并设置input的id属性为myinput。在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内在css标签中,定义类名为mydiv的样式,使用border设置div的边框为1px灰色边框,使用width设置div的宽度为400px,使用height设置div的高度为200px。在浏览器中打开test.html文件,查看文本框未下移前的效果。在css标签内,定义id为myinput的样式,使用margin-top设置文本框下移20px。在浏览器打开test.html文件,查看实现的效果。