How to move flex content to top of div? - html

Question

Stubborn text will not move to the top of the div.. no matter what i do? Please help
<div class="totals" style="display:flex; align-content: flex-start; justify-content: space-between; width:100%; background-color:green;">
<p style="color:#0e487f; background-color:red;">£1,000</p>
<p style="color:#0e487f;">£50,000</p>
</div>
Thanks

Answer 1

The margin from the p elements pushing the text down. You can easily see this if you right-click on the element and select "Inspect element".
Remove the margin, and add a padding to .totals if you still want the spacing (I haven't added a padding in the code).
Never ever use styles; use classes.
.totals {
display: flex;
align-content: flex-start;
justify-content: space-between;
width: 100%;
background-color: green;
}
.value {
color: #0e487f;
margin:0px; /* ADDED*/
}
.red.value {
background-color: red;
}
<div class="totals">
<p class="red value">£1,000</p>
<p class="value">£50,000</p>
</div>

Answer 2

First , you have margin and maybe padding that you need to remove , i advise you to always start clean from margins and padding
* {
padding : 0 ;
margin : 0;
}
Second , if the parent element do sent have height then the flex items wont flex simply because there is no room
just add height ,remove padding your code is working and use classes

Answer 3

It's on top but you have a margin top and a margin bottom. You can see it with the inspector. It's a default CSS property of the p tag. Use padding instead on your div
#p1{
background-color:red;
}
p{
#0e487f;
margin:0;
}
.totals{
display:flex;
align-content: flex-start;
justify-content: space-between;
width:100%; background-color:green;
}
<div class="totals">
<p id="p1">£1,000</p>
<p>£50,000</p>
</div>
An advice: don't use CSS inside html tag, create a separate file and call it in your page / template. In the worst case, use style tag and insert your CSS inside it.

Answer 4

<style>
.totals{
width: 100%;
height: 50px;
position: relative;
background-color: green;
}
.first{
color:#0e487f;
background-color:red;
position: absolute;
left:0;
top:-15px;
}
.second{
color:#0e487f;
background-color:red;
position: absolute;
right: 0;
top:-15px;
}
</style>
<div class="totals">
<p class="first">£1,000</p>
<p class="second">£50,000</p>
</div>

Answer 5

.totals {
display: flex;
align-items: flex-start; /* use align-items: flex-start */
justify-content: space-between;
width: 100%;
height: 50px;
background-color: green;
}
.m-0{
margin:0px; /* ADDED*/
}
.red {
background-color: red;
}
<div class="totals">
<p class="red m-0">£1,000</p>
<p class="m-0">£50,000</p>
</div>