Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein Div mit 100 % Breite erstellen und dabei die Ränder beibehalten?

Wie kann ich ein Div mit 100 % Breite erstellen und dabei die Ränder beibehalten?

Mary-Kate Olsen
Freigeben: 2024-12-23 11:12:14
Original
836 Leute haben es durchsucht

How Can I Create a Div with 100% Width and Maintain Margins?

Ein Div mit 100 % Breite und Rändern anzeigen

Ein Div mit 100 % Breite zu erstellen und dabei die Ränder beizubehalten, kann eine Herausforderung sein. Es gibt jedoch mehrere Ansätze, um dies zu erreichen:

float und calc() CSS-Funktion:

Die Float-Eigenschaft kann das Div horizontal positionieren ohne den Fluss anderer Elemente zu beeinträchtigen. Mit der Funktion calc() kann die gewünschte Breite für das Div mit Rändern berechnet werden.

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}
Nach dem Login kopieren

padding und box-sizing: border-box

Padding und Box-Sizing können ebenfalls verwendet werden, um den gewünschten Effekt zu erzielen:

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}
Nach dem Login kopieren

Mit Wenn Sie box-sizing auf border-box setzen, wird die Polsterung in die Breitenberechnung einbezogen. Dadurch wird sichergestellt, dass die Ränder außerhalb des gepolsterten Bereichs angebracht werden.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div mit 100 % Breite erstellen und dabei die Ränder beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage