HTML / CSS:当文本框嵌入其他文本框时,不需要的间隙

时间:2016-02-09 07:24:21

标签: html css

我想知道为什么绿框中的第4行文字不是从左边开始像第5行?为什么会有这种差距?如何使第4行也从第5行开始?

enter image description here

我上面写的代码如下:



div 
    {   text-align: justify; text-justify: inter-word;  }

    .t1 { font-size: 30px; margin:0px; 	padding:10px; background:green;}
    .t2 { font-size: 10px; margin:20px;	padding:10px; background:red; 
          width: 200px; float:left;}

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml1-frameset.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

    <head>

    </head>

    <body>
    <div>
	<p class="t2">  This is red box. This is red box. This is red box. This is red box. This is red box. This is red box. This is red box.
					This is red box. This is red box. This is red box. This is red box. </p>

	<p class="t1"> This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This
				   is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is 
				   green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green 
				   box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green box.
				   This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This 	
				   is green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is 
				   green box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green 
				   box. This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. 
				   This is green box. This is green box. This is green box. This is green box. This is green box. This is green box. 
	</p>
    </div>

    </body>
    </html>
&#13;
&#13;
&#13;

谢谢

3 个答案:

答案 0 :(得分:1)

因为您将margin设置为t2

这就是t1的内容从5th

开始的原因

答案 1 :(得分:1)

添加margin-bottom:0;到.t2或根据您的要求调整

答案 2 :(得分:1)

这很有效:

.t2 { font-size: 10px; margin:20px 20px 0px 20px; padding:10px 10px 0px 10px; background:red; 
      width: 200px; float:left;}