Some help needed in positioning margin or padding

This code is a part of my actual live project →

Everything looks so fine, but try deleting this line, for example, →
font-family: 'Source Sans Pro', sans-serif;

from the body

or try putting some different font-size

and the balance between the left side code(Fontawesome) and Add Post

Can we make the code in a way that irrespective of the font selected or size changed the <i></i> and <span></span> should have the same dimensions.

You have

.cobriute a {
  text-decoration: none;
  font-size: 1.1em;
}

and then

.cobriute a i {
    font-size: 22px;
    }

If you want the icon to change size with the text, then giving it a fixed px size doesn’t seem to be the way to go about it.

1 Like

Please check even putting everything in em also doesn’t fix the issue.

I believe I fixed this months ago for you but the simplest way is to use flex to fix it.

i.e.

.cobriute a{display:flex;}

The items will now match height as long as you don’t interfere with them so remove the position:relative in the i element.

.cobriute a i {etc..}

1 Like

Hi there @PaulOB

Yes, but the problem didn’t completely get fixed that time also, and you were busy in some of your client’s project and the deadline was close so I didn’t find it wise to follow you for 1-2 weeks and later I forgot.

I implemented them in the codepen.

Still, that fontawesome box not fully aligned. →

I have done a bit of font twisting here →
https://s3.amazonaws.com/sitepoint007/_font_twisting.gif

#*Reason why I am trying to make this airtight.

In the theme customizer, I have added a lot of font selection options and size selection options.

Please see this →
https://s3.amazonaws.com/sitepoint007/_font_twisting_family.gif

so whatever font-type and size is selected I want that both parts of the box should be of same height.

Did you?

Look carefully at the code I gave and then see what you implemented :slight_smile:

1 Like

Ah sorry. Instead of implementing display: flex in contribute a I implemented in cobriute.

I have returned →

.cobriute {
  display: inline-block;

should I also make it flex?

It depends whether you need a fallback for older browsers?

I would add flex to the icon as well and then you can vertically center it easily without using padding although I have added 2px top padding because there is blank space under the icon itself.

1 Like

Generally sir,

we use these 3 properties together

display: flex;
align-items: center;
justify-content: center;

Your code is working perfectly great now, but as soon as we introduce this:

justify-content: center;

our purpose fails

justify-content: center; /* Pack items around the center */

I am discussing this so that I can implement these properties with more clarity in future.

Can you show a codepen of what you mean.

1 Like

I have added a new font. the code is slightly different from your to show one of those property doesn’t work.

Try uncommenting this part →

You were referring to align-items not justify-content as you mentioned:)

yes when you add align-items:center to the parent flex then the box no longer stretches to match the height of its neighbours and creates a little box of content height vertically-aligned. That’s why I used it on the child instead.

You can see from the pictures here what is happening. The default is for the align-items is normal which is basically the same as stretch so all neighbours are the same height. However although the parent is the same height the copntent sits at the top. That’s why I use an inner flex-item to center the inside content vertically thus leaving the parent box alone.

Refer to my demo for the correct code.

1 Like

Oh yes, You are right.

Summarizing for future reference so that future visitors can also benefit from browsing this thread.

We started out from this point →

.cobriute {
    display: inline-block;
    margin: auto 0;
    margin-left: auto;
}
.cobriute a {
    text-decoration: none;
    font-size: 1.1em;
}
.cobriute a i {
    background-color: #FFFFFF;
    color: #00A2E8;
    border: 1px solid #00A2E8;
    padding: 6.8px 8px;
    font-size:22px;
    vertical-align:middle;
    position:relative;
    top:-2px;
}
.cobriute a span {
    background-color: #00A2E8;
    color:#FFFFFF;
    border: 1px solid #00A2E8;
    padding: 6.8px 8px;
}

The Final CSS is this →

body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 50px;
  margin: 50px;
}
.cobriute {
  margin: auto 0;
  margin-left: auto;
}
.cobriute a {
  text-decoration: none;
  font-size: 1.1em;
  display: flex;
}
.cobriute a i {
  background-color: #ffffff;
  color: #00a2e8;
  border: 1px solid #00a2e8;
  padding: 2px  8px 0;
  font-size: 1.1em;
  display: flex;
  align-items:center;
}
.cobriute a span {
  background-color: #00a2e8;
  color: #ffffff;
  border: 1px solid #00a2e8;
  padding: 7px 8px;
}


Final codepen

Takeaways →

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.