Entfernen Sie den Rand für das Div für die Breite in Prozent

Question

In reformierten Komponenten von React JS, habe ich die Breite für div in Prozent angegeben, damit es reagiert .... Aber das div ist Marge rechts, was ist die Ausrichtung gestört zu machen. Wie man diese Marge loswerden.

export const BannerHeaderText = styled.h1` 
    width: 46.5%; 
    height: 64px; 
    font-size: 28px; 
    font-weight: 600; 
    line-height: 1.14; 
    ` 
export const BannerParagraph = styled.p` 
    width: 51.4%; 
    height: 40px; 
    margin-top: 8px; 
    font-size: 16px; 
    line-height: 1.5; 
    color: #000000; 
    opacity: 0.38; 
    ` 

Ich erhalte die Breite als ich brauchte.

<BannerParagraphBlock> 

       <BannerHeaderText> 
        Solveing the most common problems in marketing 
       </BannerHeaderText> 

       <BannerParagraph> 
        Exquisite codially mr happiness of neglected distrusts. 
        Boisterous impossible unaffected he me everything. 
       </BannerParagraph> 

       <SeeAllProductsButton>{message.SayEffectHomePageSeeAllProductsButton.value}</SeeAllProductsButton> 

      </BannerParagraphBlock> 

Daten Missed

BannerHeaderText ist h1 und BannerParagrap ist p BannerParagraphBlock ist Abschnitt

Answer 1

Am Anfang Ihres CSS-Code zurückgesetzt Ihre Margen für die <div>-Tag. Dann können Sie später die Ränder nach Bedarf angeben. So sieht es aus,

div{ 
     margin:0; 
     padding:0; 
    } 

Hoffentlich wird dies funktionieren!

Answer 2

HTML-Überschriften sind Blockebene Elemente. Von MDN

eines Block-Element nimmt den gesamten Raum des übergeordneten Elements (Container), wodurch eine Schaffung von "Block".

In Ihrem Fall können Sie dies tun, die Überschrift zentriert zu machen

h1.heading { 
    margin-right: auto; 
    margin-left: auto; 
} 

Sie im Code-Schnipsel unten sehen können, dass die Überschrift (in rot umrandet) ist zentriert.

h1.heading { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border: 1px solid red; 
 
    width: 352px; 
 
} 
 

 
p { 
 
    color: #777; 
 
}

<h1 class="heading">Solving the most common problems in marketting</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Answer 3

Verwenden flex die gleiche

bekommen unten i ein Beispiel geschrieben

mehr Update von flexFLEX

.wrapper { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-flow: column nowrap; 
 
} 
 

 
.wrapper h1 { 
 
    font-size: 19px; 
 
    margin: 10px 0px; 
 
    color: #fff; 
 
    max-width: 352px; 
 
    text-align: center; 
 
} 
 

 
.wrapper p { 
 
    font-size: 14px; 
 
    color: #f7f7f7; 
 
    max-width: 352px; 
 
    text-align: center; 
 
} 
 

 
.wrapper button { 
 
    background: #7C6ECC; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
    border: none; 
 
    font-size: 14px; 
 
}

<div class="wrapper"> 
 
    <h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, rem, neque rerum nemo nam dolor ea nihil 
 
    </p> 
 
    <button> 
 
    See all products 
 
    </button> 
 
</div>

Answer 4

Wie wir alle wissen. h1 ist ein Block-Level-Element, also belegt es den Platz des nächsten Vorfahren auf Block-Ebene. Für Blockelement erfüllt die horizontale Richtung, um die folgende Gleichung:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block 

Der Standardmarge ist padding 0 und border-Stil ist kein, so Umrandungsbreite ist ebenfalls 0. Somit wird, wenn Sie ein spezifischen gelten Breite zu h1, kann die Gleichung nicht erfüllen. Diese Situation wird als "überbestimmt" bezeichnet, wenn margin-right ignoriert und berechnet wird, um die Gleichung wahr zu machen.

If all of the above have a computed value other than 'auto', the values are 
said to be "over-constrained" and one of the used values will have to be 
different from its computed value. If the 'direction' property of the 
containing block has the value 'ltr', the specified value of 'margin-right' 
is ignored and the value is calculated so as to make the equality true. If 
the value of 'direction' is 'rtl', this happens to 'margin-left' instead. 

Also ist es h1 Block-Level-Element, es gibt keine Möglichkeit, den rechten Rand zu entfernen;

1. Wenn Sie nur h1 zentrieren möchten, können Sie einstellen,

   h1 { margin-left: auto; Rand rechts: Auto; }

die Gleichung Nach oben wird die margin-left und margin-right auf denselben Wert berechnet werden, so h1 kann auf diese Weise zentriert werden;

2. Wenn Sie h1 irgendwo positionieren möchten, können Sie margin-left oder padding-left einem beliebigen Wert hinzufügen, um Ihren Zweck zu erreichen.

3. Oder, wie Sie benötigen, können Sie h1 von Block-Level ändern zu-Block-line, die wirklich die rechten Rand bewegen:

h1 { 
 
    display: inline-block; 
 
}

<body> 
 
    <h1>Hello, title!</h1> 
 
    <p>Hello, world!</p> 
 
</body>