CODEWITHSUNDEEP
htmlcsshtml-tablewhitespace
Roi 2021
Roi 2021

Reputation: 21

Unwanted space above text

I'm trying to create a table with 2 cells, one with text, and one with a picture. And I don't know why, but I'm getting a very large unwanted space above the text.

Here is the code:

.Table {
    border: 1px solid blue;
    width: 100%;
    display: table;
    margin: 0px;
    padding: 0px;
}

.Row {
    border: 1px solid red;
    display: table-row;
    margin: 0px;
    padding: 0px;
}

.PicDiv {
    border: 1px solid black;
    display: table-cell;
    margin: 0px;
    padding: 10px;
    width: 36px;
}

.TextDiv {
    border: 1px solid black;
    display: table-cell;
    margin: 0px;
    padding: 0px;
    width: auto;
}
<div class="Table">
<div class="TableRow">
    <div class="PicDiv"><img src="https://i.ibb.co/crVTB6c/Pic.png"></div>

    <div class="TextDiv">
    Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... 
    </div>
</div>
</div>

And this is the result that I'm getting:

https://i.ibb.co/7yBRNFb/Result.jpg

Why is that?

Upvotes: 1

Views: 204

Answers (1)

dale landry
dale landry

Reputation: 8610

Use can vertical-align: top; to align the text to the top of the element.

  • MDN: vertical-align sets vertical alignment of an inline, inline-block or table-cell box.

EDIT: OP asked about a better way to have inline elements

I suggest flexbox

display: flex; allows you to align items in a directional flow by row or column using sub-properties. justify-content and/or align-items, depending on your main-axis, along with other styling attributes.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.flex-cont {
  display: flex;
  justify-content: space-around;
  align-items: start;
}

.text {
  padding: .2rem .5rem;
}
<div class="main">
<div class="flex-cont">
    <div class="PicDiv"><img src="https://i.ibb.co/crVTB6c/Pic.png"></div>
    
    <div class="text">
    Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... Text... 
    </div>
    
</div>
</div>

Upvotes: 1

Related Questions