I can't remove the space above and below a paragraph

Question

I can't remove the space above and below a paragraph

1.4k views Asked by Israel At 03 February 2021 at 11:23

I can't remove the space above and below a paragraph that only consists of the letter "I" at the top of my Web Page.

I have already tried to remove it with the "margin" and "padding" properties but it is not changed. Also I have tried, for the property "line-height", the value 1 so that the line height exactly matches the size of the text and it doesn't work either.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Came</title>
<link rel="stylesheet" media="screen" href="http://fontlibrary.org/face/kolar" type="text/css"/> 
<style>
        
body{
background-color:black;
color:white;}

.photo{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
border:5px solid white;}

.initial{
font-size:500px;
line-height:1;
padding-top:0px;
padding-bottom:0px;

}

.main{
margin-top:0px;
margin-bottom:0px;}


h1{
font-family:KolarExtraBold;
font-size:20px;
border:solid 3px red;
width:65%;
margin: 0 auto;
margin-bottom:3px;}
</style>

</head>

<body>

<div class="photo">

<p class="initial">I</p>

</div>


<div class="main">
<h1><strong>CSS</strong> The Manual</h1>
</div>
</body>
</html>

Original Q&A

There are 4 answers

**John Paulo Cruz** · Answer 1 · 2021-02-03T11:26:39+00:00

John Paulo Cruz On 03 February 2021 at 11:26

elements generally have margins and / or padding. You can set those to zero in a stylesheet.

p {
margin: 0;
padding: 0;

}

Semantically speaking, however, it is fairly unusual to have a list of paragraphs.

**Hritika Agarwal** · Answer 2 · 2021-02-03T12:04:13+00:00

Hritika Agarwal On 03 February 2021 at 12:04

tag has default margin of 1em from top and botton. So you need to explicit define margin and padding both equal to 0, which can be done in 2 ways.

 p {
margin: 0;
padding: 0;
 }

or by removing margin and padding like this

<p class="initial my-0 py-0">I</p>

**Steven Kuipers** · Answer 3 · 2021-02-03T12:08:57+00:00

The user agent also adds styling to paragraph elements:

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

You can add a rule for p elements to remove this margin.

You will still have space above en below the letter after you remove the margin. This is due to the line height you set. This line height needs to accommodate different letters so it is normal to expect space above and below your letters. If you just want this letter and as little space above and below it you can set the line height to .655.

.initial {
    margin: 0;
    line-height: .655;
}

**hritika agarwal** · Answer 4 · 2021-02-03T12:14:35+00:00

hritika agarwal On 03 February 2021 at 12:14

you can simply do it like this ->

<p class="initial my-0 py-0">I</p>

where my stands for margin top and margin bottom and py stands for padding top padding top and padding bottom

TechQA.

I can't remove the space above and below a paragraph

There are 4 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in PADDING

Related Questions in MARGIN

Related Questions in LINE-HEIGHT

Popular Questions

Popular Tags

Trending Questions