how to decrease the height of content area for

Question

Could anyone tells me how to decrease the height of the content area for p tag with css?

I want to, 1. bring the bottom orange dotted line closer to the text above. (border-bottom: 3px orange dotted;) 2. reduce the height of the yellow highlighting box. (body { background-color:yellow })

adjusting the properties "line-height" and "height" don't help...

Thanks!

Answer 1

You should be able to change the height with the "line-height" property make sure there is not another css overwriting it. to make sure you can add !important at the end like this:

p {
  line-height: 1em !important; 
}

if that worked go back to your code and make sure you dont have another element changing the line-height

Answer 2

take the margin and padding off your p tag.

p {
margin: 0;
padding: 0;
}

if that does not work for you put it in a div with a specified height;

<div class="myDiv">
<p>your p content</p>

</div>

style;

.myDiv {
margin: 0;
padding: 0;
height: 300px; //whatever height you want
width: 300px; //whatever width you want
}