What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from the others.

Something like this layout

<!DOCTYPE html>
<html>

<head>
  <title>My first web page!</title>
  <style>
    img {
      width: 66px;
      border-radius: 50px;
      float: left;
      margin-right: 10px;
    }
    
    .username {
      font-weight: bold;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>How do you like my new profile picture?</p>

  <img src="images/killjoy.jpg" />
  <p class="username">@Killjoy</p>
  <p>Your profile pic is super cute!</p>

  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>Thanks, yours is too!</p>

  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>Hello! Jett seems really sad today :( </p>
</body>

</html>

htmlcss

Answer №1

    <html>
    <head>
      <title>My first web page!</title>
      <style>
        img {
          width: 66px;
          border-radius: 50px;
          float: left;
          margin-right: 10px;
        }
        
        .chat {
            margin: 100px 0;
        }

        .username {
          font-weight: bold;
          margin-top: 30px;
        }
      </style>
    </head>
    <body>
      <div class="chat">
          <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Yeni profil fotom nasıl?</p>
    </div>
    
    <div class="chat">
      <img src="images/killjoy.jpg" />
      <p class="username">@Killjoy</p>
      <p>Profil foton çok tatlı!</p>
  </div>

      <div class="chat">
      <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Teşşekür ederim seninkiside öyle!</p>
  </div>

      <div class="chat">
      <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Merhabaa! Jett bu gün çok üzgün :(</p>
    </div>
    </body>
  </html>

Create a div containing an image and text, adding some margin or adjust the last message to take up all remaining space as desired.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

I am looking to migrate some classes from Bootstrap 4 to 5 because some of the Bootstrap classes are no longer usable, especially in utilities. I am using SASS so I can utilize @extend for this process. https://i.sstatic.net/dEDCw.png For classes .text-l ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Align an Image Vertically Using Bootstrap's Grid System

Hey there! I've been trying to center an image within a "div" tag using Bootstrap, but despite my best efforts and reading through various resources, I haven't been able to crack it. * { margin: 0; padding: 0; } .people-one { w ...

htmlcssalignmentbootstrap-5

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

javascripthtmlcssvue.js

The luminosity of MeshBasicMaterial in Three.js

In my current setup with threejs, I am utilizing MeshBasicMaterial for lighting effects. Each element contains a simulated point light within. I have assigned a variable named color, defined as rgb(random value, random value, random value). I am looking ...

javascripthtmlcolorsthree.jsrgb

I am getting a 404 error message stating that node_modules cannot be found

I am currently working on a web application using gulp and angular. However, when I run 'gulp serve', the application is unable to locate the files in the node_modules folder. Below is an excerpt from my gulp file: // This gulp file was generat ...

htmlangularjshttp-status-code-404

Error message indicating that the function 'slice' is not defined for the data variable

I've already searched for solutions to a similar issue, but none of them worked for me. I'm dealing with an object that fetches a list of cities including their names, populations, and states. Here is my HTTP service request: cidadesUrl = 'h ...

htmlangulartypescript

What is the best way to center a div horizontally when the width is unknown?

Check out the full screen result here: http://jsfiddle.net/anik786/UYkSf/4/embedded/result/ Here's where you can find the HTML/CSS: http://jsfiddle.net/anik786/UYkSf/4/ This is the HTML code: <div class="gallery_container"> <div class="pic ...

csshtmlscreen-size

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

javascriptphphtml

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...

javascripthtmlcssmicrosoft-metrometro-ui-css

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

javascripthtmlangulartypescriptservice

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

What is the best way to incorporate AngularJS bindings when loading HTML content from a string?

I am facing an issue in my angular project where I need to load external HTML from a string variable into a div that currently has a controller scoped to it. The problem is that the HTML being loaded contains angular bindings, but once loaded, these bindi ...

htmlangularjs

Tips for maintaining the full width/height ratio of a child image when covering a fixed size container

I have a square container with dimensions of 300x300 and an <img src="" /> image inside. My goal is for the image to cover the entire container while maintaining its width/height ratio. If the image's width is smaller than its height ...

javascripthtmlcsssassless

Unable to initialize styles in a newly created Angular CLI project

Just finished setting up a new project with the angular cli. Encountering an issue when trying to link the styles.css file in index.html <link rel="stylesheet" type="text/css" href="styles.css"> Getting the following error in Chrome's dev too ...

cssangulargoogle-chromeangular-cli

Utilizing interpolation for a CSS class defined in an external file within Angular 2

Is it feasible to send a variable to a CSS class in an external CSS file within Angular 2, such as: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty ...

cssangulartypescriptangular2-template

Understanding the structure of html elements

Within my downloaded HTML files, I consistently have key executives mentioned at the beginning of each file (like "Dror Ben Asher" in the code snippet below): <DIV id=article_participants class="content_part hid"> <P>Redhill Biopharma Ltd. (NA ...

pythonhtmlbeautifulsouphtml-parsing

Concealing certain options in a dropdown list with jQuery Chosen

My app has a unique feature where it displays different dropdown lists based on previous selections. Specifically, I have two lists - one for vehicle Makes and the other for Models. When a specific Make is chosen, like BMW or Audi, the next list will only ...

javascriptjqueryhtmljquery-chosen

"Explore the functionalities of Drupal's innovative Menu module: How sub-sub menus can take precedence over sub-menus

When visiting , I noticed that the Nice Menu module for Drupal is not displaying sub-sub menus properly. If you navigate to the first item in the menu and then select the first one in the sub-menu (Facilities->Spring->Calendar), you'll see that ...

cssdrupal-modules

Client-side resizing an image before sending it to PHP for uploading

Greetings! Currently, I am utilizing a JavaScript library from this source to resize images on the client-side. The image resizing process works successfully with the following code: document.getElementById('foto_select').onchange = function( ...

javascriptphpjqueryhtmlajax