Remove The Space In Element P
Solution 1:
You can reduce the height's lines of paragraphs with the line-height
property:
* {
margin:0px!important;
padding:0px!important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_enp{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cnp{
font-size:24px;
border:dashed 1px black;
}
<divclass="di_header"><divclass="di_h_en"><p>I'm left</p></div><divclass="di_h_cn"><p>I'm chinese 我是中文</p></div></div>
Here, I put a line-height
a little smaller, so it reduces the margin with border. Play with the 30px
value to see the change.
Solution 2:
this is happening becuase both <p>
contains different font-size
.. you can fixed them by using line-height
property.
Add the line-height
in the CSS. you use 32px font-size on another p
element.
.di_h_cnp{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Solution 3:
Can you try using margin-bottom:0
for <p>
.
Solution 4:
Just keep font-size
same for both or like mentioned above use line-height
and play with it until you are satisfied.
demo:
or
Solution 5:
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px
from the .di_h_en{your-styles-here}
Post a Comment for "Remove The Space In Element P"