Spacing in between items in a flexbox

Question

I am having a flex container with an image and a text. The image is in a <div> and the text is within a <ul> and <li> elements. The <li> is another flex container to justify the text in the center. However, there is a space between the <li> container and the child <div> of the first container. Is there a way to remove the space and center it vertically? I used margin-left:-4%; to remove the space. Is it the right approach?

Currently this is how it looks:

Removing the space and vertically center aligned this is how i want it to look-

CSS:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
}

#myPhoto{
  width:10%;
  border: blue 2px solid;
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
  margin-left:-2%;
}

#myHeadline li{
  display: flex;
  border: 2px solid gray;
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

CODEPEN: https://codepen.io/chandeeparora19/pen/oNxBNqL

it is not flex but default padding on ul : reset it : `ul{padding:0;}` — G-Cyrillus, Aug 23 '20 at 12:02

score 3 · Accepted Answer · answered Aug 23 '20 at 12:11

In the css, I marked the grafts. There is no space and vertical alignment is set.

Option with borders:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
  align-items: center; /*add - vertical center*/
}

#myPhoto{
  width:10%;
  border: blue 2px solid;
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
  padding: 0; /*add - remove space*/
}

#myHeadline li{
  display: flex;
  border: 2px solid gray;
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
            <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>

    </div>
    
    <ul id="myHeadline">
      <li id="name">This is google</li>
      <li id="Tagline">Helps you search everything</li>
  </ul>
</div>

Option without borders:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
  align-items: center; /*add - vertical center*/
}

#myPhoto{
  width:10%;
  /*border: blue 2px solid;*/
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  /*border: green 2px solid;*/
  list-style-type: none;
  padding: 0; /*add - remove space*/
}

#myHeadline li{
  display: flex;
  /*border: 2px solid gray;*/
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
            <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>

    </div>
    
    <ul id="myHeadline">
      <li id="name">This is google</li>
      <li id="Tagline">Helps you search everything</li>
  </ul>
</div>

score 0 · Answer 2 · answered Aug 23 '20 at 12:29

0

You should reset your padding in this situation.

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
  padding-left: 0;
}

answered Aug 23 '20 at 12:29

Ahmad Dalao

1,968
1
8
14

score 0 · Answer 3 · answered Aug 23 '20 at 12:41

I added display:table instead of flex for the the headlineContainer and for myphoto and text I added display:table-cell and verical-align:middle

.headlineContainer{
  display:table;
  border: red 2px solid;
  justify-content: flex-start;
}

#myPhoto{
  width:10%;
  border: blue 2px solid;
  display:table-cell;
  vertical-align:middle;
}

ul {
  padding:0px
}
#myPhoto>img{
  width: 100%;
  display:inline-block;
  vertical-align:middle;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
   display:inline-block;
  vertical-align:middle;
}

#myHeadline li{
  display: flex;
  border: 2px solid gray;
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
            <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>

    </div>
    
    <ul id="myHeadline">
      <li id="name">This is google</li>
      <li id="Tagline">Helps you search everything</li>
  </ul>
</div>

Spacing in between items in a flexbox

3 Answers3