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

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;
}

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;
}

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!