CODEWITHSUNDEEP
htmlcssflexbox
nischalinn
nischalinn

Reputation: 1175

line spacing in flex box container div

Why is there so much line spacing in flex box container? How can I adjust that? I was trying an example in w3schools and got this.

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

p {
  margin: 0
}
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

<div class="flex-container">
  <div>
    <p>The quick brown fox jumps over the lazy dog</p>
  </div>

</div>

Link:: https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_column I tried p {margin: 0} but still no use. Please help with this. Thank You!!!

Upvotes: 0

Views: 909

Answers (3)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

All you need to do to get rid of the space is to remove or adjust the line-height: 75px;

in .flex-container>div

you could remove it completely and the line height will be automatically adjusted to the browser default value which is close to 1.2 depending on your browser settings and font-size by your PC.

So the line height will be calculated as follows:

line-height: 1.8975 ( roughly browser default value) * ( font-size you give to the element example 30px) it's really advised to use 1.2 when doing your math but yeah I just wanted to be as accurate as I can.

the height of that element will be 35.692px after multiplying it with the line-height and font-size that's how your browser does it for you. But if you want more you can use more.

You could also use percentage ( % )

Here is a great page you could read about line-height

Upvotes: 0

Sean Kelliher
Sean Kelliher

Reputation: 171

75 pixels is a very tall line height. Just change it to a smaller number such as "35px" or "1.2" and you'll see the difference.

.flex-container > div {
  line-height: 1.2;
}

Upvotes: 0

Dinesh s
Dinesh s

Reputation: 377

Are you want to decrease the line spacing between the p tag if yes try to change line-height:0 in flex-container>div

 <!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 200px;
  margin: 10px;
  text-align: center;
  font-size: 30px;
}

</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

<div class="flex-container">
  <div><p>The quick brown fox jumps over the lazy dog</p></div>
 
</div>

</body>
</html>

Upvotes: 1

Related Questions