Remove The Space In Element P

Fist of all, pls see this Question and the Demo You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem

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_en p{
    font-size:32px;
    line-height:30px;
    border:dashed 1px black;
}

.di_h_cn p{
	font-size:24px;
    border:dashed 1px black;
}

<div class="di_header">
    <div class="di_h_en"><p>I'm left</p></div>
    <div class="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_cn p{
    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:

Jsfiddle

or

Jsfiddle2

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}