Question 419895 in Html Question posted in
Some basic documentation can be found here.

Html – Getting extra padding/margin around multi-line links

I have the following code

.menu {
    margin: 20px;
    display: flex;
    justify-content: center;
}

.menuitem {
    height: 78px;
    width: 102px;
    padding: 15px 9px;
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: black;
}
<div class="menu">
    <div class="menuitem"><a href="item1.html" class="menulink">Item 1</a></div>
    <div class="menuitem"><a href="item2.html" class="menulink">Item 2 extra text</a></div>
</div>

Both justify-content:center and text-align:center seems necessary as one seems to work on single line text and one on multi line. I can live with that and it’s not the real issue. However I also have

.menulink {
    color: white;
    padding: 2px;
    text-decoration: none;
}

.menulink:hover {
    border: 1px dotted white;
}

This works as intended adding a border around elements when hovering over them. The issue is that it’s only with single line links that the border is "padded" 2px away from the text. For links that span more than one line there’s extra padding or margin between the left and right of the text and the border up to the padding of .menuitem.

I’m not entirely sure I’m doing this correctly. Using both justify-content:center and text-align:center looks like an ugly hack to me but I can’t get my layout to work and my text centred in both cases without it. Having multi-line links with flexbox seems to be breaking it. For reference the menu is a film strip with the menuitems the films spaced next to each other.

Change 1: I made some adjustments but multi-line links still span the entire content area from left to right https://jsfiddle.net/3pce4oxh/

Change 2: As an alternative I made them all span the entire area https://jsfiddle.net/9tq5ogcm/

Tags:

2

Answers


  1. 0

    The gap is occurring because the text is not fitting in the first row. To resolve this, change the width from 102px to 84px. This adjustment will allow the text to fit properly and eliminate the gap.

    Login or Signup to reply.
  2. 0

    Unless you can dynamically break the text into different elements, otherwise, the multiline link will always reach the max width of its parent, that’s why it is a multi line link. It doesn’t matter you use both justify-content:center and text-align:center.

    .menu {
    margin: 20px;
    display: flex;
    justify-content: center;
}

.menuitem {
    height: 78px;
    width: 102px;
    padding: 15px 9px;
    margin: auto 0;
    display: flex;
    text-align: center;
    background-color: black;
}

.menulink {
    color: white;
    padding: 2px;
    margin: auto;
    text-decoration: none;
}

.menulink:hover {
    border: 1px dotted white;
}
    <div class="menu">
    <div class="menuitem"><a href="item1.html" class="menulink">Item 1</a></div>
    <div class="menuitem"><a href="item2.html" class="menulink">
      <div class="menulink-text">Item 2 extra</div>
      <div class="menulink-text">text</div>
    </a></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search