4 Correct answers
there is a big piece of information missing... what is your HTML structure... it's based on that, that the CSS will be able to correctly define the property to set.
but at first sight, text-indent would not be the property to target... rather margin or padding... and if your A TAG is inside the text block... nothing should be applied
Simplest way would be to use 2 columns. Insert your image in the 1st column and your text in the 2nd column. That way the text cant move under the image or if your text is wrapped in a <p> tag or <div> tag then add some left-margin to it, so the text is pushed clear of the image.
As Birnou says, for more advice we would need to see the html you are using. Can you post it in the forum?
Short answer: Use 2 columns. Put image in column 1, put text in column 2.
Working example with CSS Grids:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
grid-auto-rows:
grid-gap: 1em;
border: 1px dotted silver;
}
.grid_contaiOr if you use Bootstrap, insert 2 Bootstrap Cards like so.
6
Replies
Short answer: Use 2 columns. Put image in column 1, put text in column 2.
Working example with CSS Grids:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
grid-auto-rows:
grid-gap: 1em;
border: 1px dotted silver;
}
.grid_container div {
vertical-align: middle;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="grid_container">
<div>
<img src="https://dummyimage.com/200x200" alt="Placeholder">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa similique adipisci ad odio voluptas quod, laborum eligendi harum aliquid repudiandae! Aspernatur, possimus tenetur porro modi in rerum quaerat quod labore!</p>
</div>
</div>
</body>
</html>
Or if you use Bootstrap, insert 2 Bootstrap Cards like so.
AdChoices
